Rotierende Feature-Boxen

Das werden wir bauen

Der volle Effekt (mit Übergangsanimationen) funktioniert in neueren WebKit- und Opera-Browsern sowie in Firefox 4 (in echter Betaversion ab heute). Jeder andere Browser wird die Blöcke ohne Übergangsanimation rotieren.

Demo ansehen   Dateien herunterladen

Der interessante Teil

Die gesamte Animation basiert auf CSS3-Übergängen. JavaScript kümmert sich nur um die Klicks und wendet Klassen nach Bedarf an und entfernt sie wieder. Warum nicht auch JavaScript für die Animationen verwenden und eine breitere Browserunterstützung erhalten? CSS3 ist dafür weitaus besser geeignet. Die Animationen sind besser (Hardware-beschleunigt). Sie verlangsamt kein anderes JavaScript. Es ist auch einfacher zu schreiben, indem man die Animationen in CSS belässt. Mit JavaScript können wir nicht so einfach zu Klassen animieren*.

Mit zunehmender Zeit werden immer mehr Animationen auf CSS und weg von JavaScript-Bibliotheken verlagert.

HTML

Wir geben uns einen semantischen Wrapper, der auch den relativen Positionierungskontext für alle Blöcke bietet. Die Blöcke werden absolut positioniert und letztendlich durch Ändern ihrer Top/Left-Werte animiert, daher ist dieser relative Kontext wichtig. Jeder Block hat einen Div-Wrapper mit einer eindeutigen ID sowie einen Klassennamen, der seinen aktuellen Zustand angibt. Es gibt drei selbsterklärende Zustandsklassen, beginnend mit dem offensichtlichen active, was der Block ist, der sich gerade im vollständig sichtbaren, am weitesten links befindlichen Zustand befindet.

Jeder Block hat eine Unterüberschrift, die nur angezeigt wird, wenn er nicht aktiv ist, und einen weiteren Div-Wrapper, der alles enthält, was angezeigt werden soll, wenn der Block aktiv ist. Die Idee der Unterüberschrift gibt die Möglichkeit, eine Art kurzen Teaser anzubieten und zum Klicken zu verleiten.

<div id="rotator">

	<div id="block-1" class="active">
		<h2>Subtitle #1</h1>
		<div>
			<h1>Seven Space Frogs Descend On Canada's Largest City</h1>
			<img src="spacefrog.jpg" alt="space frog">
			<p>Commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		</div>
	</div>
	
	<div id="block-2" class="non-active-top">
		<h2>Subtitle #2</h2>
		<div>
			<h1>The Power of the Voodoo. Who do? You do.</h1>
			<img src="goblins.jpg" alt="goblins">
			<p>Ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		</div>			
	</div>
	
	<div id="block-3" class="non-active-bottom">
		<h2>Subtitle #3</h2>
		<div>
			<h1>You May Find Yourself Living in a Shotgun Shack</h1>
			<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		</div>			
	</div>

</div>

CSS

Einrichten des Wrappers und des Kontexts

#rotator { width: 920px; height: 280px; position: relative; background: white; padding: 20px; }

Eindeutiges Styling für jeden der Blöcke kann über die ID erfolgen

#block-1 { background: #d5fcff; }
#block-2 { background: #e1ffd5; }
#block-3 { background: #ffffd8; }

Jeder Block teilt sich einige Eigenschaften, so dass der Überlauf versteckt ist, sie absolut positioniert sind und mit der gleichen Geschwindigkeit animiert werden

#rotator > div { 
	position: absolute; 
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

Die drei Zustände der Boxen bestimmen ihre Größe und Position

#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .non-active-top { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-bottom { top: 170px; left: 620px; height: 130px; width: 320px; }

Die Unterüberschrift (h2) wird genau so groß wie die Box, indem ihre Zeilenhöhe gleich der Höhe der Box gesetzt wird. Dies schiebt alles andere aus dem Weg und versteckt es, da der Überlauf versteckt ist. Wenn die Box dann in ihrem aktiven Zustand ist, verstecken wir die Unterüberschrift und alles andere wird natürlich angezeigt.

#rotator h2 {
	text-align: center; 
	line-height: 130px;
}
#rotator .active h2 {
	display: none;
}

jQuery

Wir erstellen eine rotate-Funktion, die die richtigen Klassen den richtigen Blöcken zuweist, je nachdem, was der current-Wert ist. Wahrscheinlich gibt es einen saubereren Weg, dies zu tun, der besser skaliert…

function rotate() {
				
	if (current == 1) {
		$("#block-1").removeClass().addClass("active");
		$("#block-2").removeClass().addClass("non-active-top");
		$("#block-3").removeClass().addClass("non-active-bottom");
	} else if (current == 2) {
		$("#block-1").removeClass().addClass("non-active-bottom");
		$("#block-2").removeClass().addClass("active");
		$("#block-3").removeClass().addClass("non-active-top");
	} else {
		$("#block-1").removeClass().addClass("non-active-top");
		$("#block-2").removeClass().addClass("non-active-bottom");
		$("#block-3").removeClass().addClass("active");
	}

}

Dann hängen wir einen Klick-Handler an jeden der Blöcke. Wenn sie angeklickt werden, ermitteln wir, welcher es ist, anhand seiner ID, setzen den aktuellen Wert auf diesen und rufen die rotate-Funktion auf.

$("#rotator div").click(function() {
	current = this.id.substr(6);			
	rotate();
});

Dank an Andrea Canton für die Idee, zu überprüfen, welcher Block angeklickt wurde, was es den Blöcken ermöglicht, in beide Richtungen zu rotieren, was befriedigender ist.

Alles zusammen jetzt

Sie klicken also auf einen Block, die Klassen dieses Blocks werden angepasst. Die neuen Klassen haben unterschiedliche Größen- und Positionswerte. Da der Block eine CSS-Übergangsanimation hat, werden diese neuen Größen- und Positionswerte animiert. Einfach.

Demo ansehen   Dateien herunterladen

---

*jQuery UI hat die Möglichkeit, zu Klassen zu animieren, indem es jQuerys addClass erweitert. In diesem Szenario ist es jedoch nicht ausreichend, da wir zuerst die vorherige Klasse entfernen müssen (sie an eine Standardposition zurückbewegen), bevor wir die neue hinzufügen, was die Animationen ruckelig und falsch macht.