Interessante Inhalte der eigenen Webseite auf interessante Art und Weise zu präsentieren ist wohl das Ziel eines jeden Webseitenbetreibers. Dem Besucher stechen dabei bewegte Bilder und Animationen natürlich besonders ins Auge. Mit keyframe-Animationen gibt es unzählige Möglichkeiten das Interesse des Besuchers auf einen bestimmten Bereich zu lenken.

Wie wäre es mit einer Slideshow? In diesem Tutorial zeige ich, wie ihr vier Artikel in einer Endlosschleife animiert für eure Besucher präsentiert?

Vorschau gefällig?

Also, was machen wir genau?

Eigentlich ziemlich simpel. Wir werden vier Boxen per keyframe-Animation im Uhrzeigersinn in vier Schritten um 360 Grad drehen. Dabei sind lediglich zwei Boxen sichtbar. Das gibt einen netten Effekt. Aber seht selbst.

Und los

Beginnen wir mit einem übergeordneten Div-Container, in den wir den restlichen Inhalt einfügen werden. In meinem Beispiel haben die Inhalts-Boxen eine Größe von 350 x 350 Pixeln. Da wir jeweils zwei neben- und übereinander anordnen wollen, erhält der Container eine Größe von 800 x 800 Pixeln. So haben wir noch ein wenig Platz für den Außenabstand.

.metro {
  position: relative;
  margin: 20px auto;
  width: 800px;
  height: 800px;
}

Die vier Boxen werden wir als Listenelemente definieren. Wir können die einzelnen Boxen so prima neben- und untereinander anordnen. Dafür benötigen wir folgende Deklaration:

.metro ul {
  list-style: none;
}

.metro ul li {
  float: left;
  width: 320px;
  height: 320px;
  background: #eee;
  color: #333;
  margin: 10px;
  padding: 15px;
}

Zwischenergebnis:

Jetzt wollen wir die Boxen mit Leben füllen. Jede der Boxen erhält ein Bild (img), eine Überschrift (h1), eine Beschreibung (p) sowie einen Weiterlesen-Link (a).

.metro ul li img {
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0 10px 10px 0;
}

.metro ul li h1 {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
}

.metro ul li p {
  font-size: 14px;
  margin: 10px 0;
}

.metro ul li a {
  position: relative;
  left: 0;
  top: 5px;
  color: #fff;
  background: #333;
  font-size: 11px;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 3px;
}

Ein wenig aufhübschen

Geben wir den Boxen noch den letzten Schliff. Wir fügen anstatt des tristen Graus einen Hintergrundfarbverlauf (background-gradient) sowie einen leichten Box-Schatten (box-shadow) hinzu:

.metro ul li {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed));
  background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%);
  background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%);
  background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%);
  background: linear-gradient(top, #ffffff 0%,#ededed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
  box-shadow: 0 0 10px #ccc;
}

Für mein Beispiel nutze ich den Google Webfont „Ubuntu“:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);

.metro ul li {
  font-family: 'Ubuntu', sans-serif;
}

Muss natürlich nicht sein, aber ganz schick, oder?

So weit sind wir:

Animation bitte

Nun fehlt noch die Animation der Boxen. Wie gesagt, wir werden alle vier Boxen zum exakt selben Zeitpunkt verschieben. Die erste Box verschieben wir in Schritt 1 um 370 Pixel nach rechts (translateX(370px)). Im zweiten Schritt verschieben wir die Box um 370 Pixel nach rechts (translateX(370px)) sowie 370 Pixel nach unten (translateY(370px)). Dann 370 Pixel nach links und schlussendlich im letzten Schritt wieder zurück auf die Ausgangsposition.

Das gleiche machen wir auch für die drei anderen Boxen:

@-webkit-keyframes box1 {
  0% { -webkit-transform: translateX(0); }
  24% { -webkit-transform: translateX(0) ; }
  25% { -webkit-transform: translateX(370px); }
  49% { -webkit-transform: translateX(370px); }
  50% { -webkit-transform: translateX(370px) translateY(370px); }
  74% { -webkit-transform: translateX(370px) translateY(370px); }
  75% { -webkit-transform: translateX(0) translateY(370px); }
  99% { -webkit-transform: translateX(0) translateY(370px); }
  100% { -webkit-transform: translateX(0); }
}

@-webkit-keyframes box2 {
  0% { -webkit-transform: translateY(0); }
  24% { -webkit-transform: translateY(0); }
  25% { -webkit-transform: translateY(370px); }
  49% { -webkit-transform: translateY(370px); }
  50% { -webkit-transform: translateY(370px) translateX(-370px); }
  74% { -webkit-transform: translateY(370px) translateX(-370px); }
  75% { -webkit-transform: translateY(0) translateX(-370px); }
  99% { -webkit-transform: translateY(0) translateX(-370px); }
  100% { -webkit-transform: translateY(0); }
}

@-webkit-keyframes box3 {
  0% { -webkit-transform: translateX(0); }
  24% { -webkit-transform: translateX(0); }
  25% { -webkit-transform: translateY(-370px); }
  49% { -webkit-transform: translateY(-370px); }
  50% { -webkit-transform: translateY(-370px) translateX(370px); }
  74% { -webkit-transform: translateY(-370px) translateX(370px); }
  75% { -webkit-transform: translateY(0) translateX(370px); }
  99% { -webkit-transform: translateY(0) translateX(370px); }
  100% { -webkit-transform: translateY(0); }
}

@-webkit-keyframes box4 {
  0% { -webkit-transform: translateX(0); }
  24% { -webkit-transform: translateX(0); }
  25% { -webkit-transform: translateX(-370px); }
  49% { -webkit-transform: translateX(-370px); }
  50% { -webkit-transform: translateX(-370px) translateY(-370px); }
  74% { -webkit-transform: translateX(-370px) translateY(-370px); }
  75% { -webkit-transform: translateX(0) translateY(-370px); }
  99% { -webkit-transform: translateX(0) translateY(-370px); }
  100% { -webkit-transform: translateY(0); }
}

Die Animationen binden wir wie folgt für unsere vier Boxen ein:

.metro ul li.box1 {
  -webkit-animation: box1 30s linear infinite;
}

.metro ul li.box2 {
  -webkit-animation: box2 30s linear infinite;
}

.metro ul li.box3 {
  -webkit-animation: box3 30s linear infinite;
}

.metro ul li.box4 {
  -webkit-animation: box4 30s linear infinite;
}

Ein kompletter Durchlauf benötigt 30 Sekunden. Mit infinite stellen wir die stetige Wiederholung der Animation, also die Endlosschleife, ein.

Wir wollen nur die beiden oberen Boxen zeigen. Daher verkleinern wir als letzten Schritt noch die Höhe des Div-Elements auf die Höhe einer Box und blenden die nach unten hinausragenden Boxen aus:

.metro {
  height: 380px;
  overflow: hidden;
}

In die Webseite einbauen

So baut ihr die Slideshow in die Webseite ein:

<div class="metro">
	<ul>
		<li class="box1">
			<img src="../images/sackboy1.png">
			<h1>Wahnsinnig interessanter Artikel</h1>
			<p>Inhaltsbeschreibung des Artikels</p>
			<a href="#">Neugierig?</a>
		</li>
		<li class="box2">
			<img src="../images/sackboy2.png">
			<h1>Mordsmäßig wichtiger Artikel</h1>
			<p>Inhaltsbeschreibung des Artikels</p>
			<a href="#">Neugierig?</a>
		</li>
		<li class="box3">
			<img src="../images/sackboy3.png">
			<h1>Unglaublich mitreißender Artikel</h1>
			<p>Inhaltsbeschreibung des Artikels</p>
			<a href="#">Neugierig?</a>
		</li>
		<li class="box4">
			<img src="../images/sackboy4.png">
			<h1>Extrem dramatischer Artikel</h1>
			<p>Inhaltsbeschreibung des Artikels</p>
			<a href="#">Neugierig?</a>
		</li>
	</ul>
</div>

Will in Aktion sehen

Hier gibt es die Live-Demo:

Du hast keine Lust auf nachbauen? Okay, dann hab ich hier den Download für dich

Eine kleine Abwandlung hätte ich noch. Das Ganze lässt sich auch prima als Bilder-Slideshow verwenden. Schau dir die Demo an

Der passende Download:

Welche Browser spielen mit?

Leider funktionieren keyframe-Animationen derzeit nur mit Firefox- und Webkit-Browsern. Mit einem anderen Browser werden nur die ersten beiden Boxen statisch angezeigt.

Viel Spass.