Animierte Slideshows

ohne JavaScript

Ich finde CSS-Transitions und Animations ja ziemlich lustig 🙂 und wollte schon immer so eine Web-Slideshow basteln ohne irgend ein JavaScript. Hier mal ein Beispiel:

  • Slide01
  • Slide02
  • Slide03
  • Slide04
  • Slide05

Das war einfacher als gedacht. In diesem Artikel hab ich das nun etwas aufbereitet – als Inspiration, zum Nachbauen oder Experimentieren (und nicht zuletzt als Dokumentation fĂŒr mich).

1. Bilder aussuchen

Man nehme ein paar Bilder, z.B. diese hier:

Oder andere: Hier ein Auszug aus meinem Lesezeichen-Ordner "Free Stock Images": Die Bilder sind meist kostenfrei – auch kommerziell – nutzbar. Aber bitte die Lizenzbedingungen der Portale prĂŒfen und ggf. Lizenzbedingungen (evtl. sind Angabe des Portals und/oder der Urheber o.Ă€.) erfĂŒllen. Die Liste ist alphabetisch und nach keinen anderen Kriterien sortiert:

Viel Spaß beim Stöbern 🙂

2. Das HTML-GerĂŒst

Man benötigt nur wenig HTML. Ich lege einen div-Container ("Wrapper") an, und darin eine ul-Liste. Die Anzahl der Listenpunkte (li) entspricht der Anzahl der Slides:

HTML

<div id="#slideshow_wrapper">
  <ul class="slideshow">
    <li>Slide01</li>
    <li>Slide02</li>
    <li>Slide03</li>
      ...
    <li>SlideXX</li>     /* XX = Anzahl der Slides */
  </ul>
</div>

Alles weitere ist reines CSS 🙂

3. Das Basis-CSS

Der Wrapper wird – je nach SeitengerĂŒst – positioniert und mit Höhe und Breite, optional mit Hintergrundfarbe (dazu unten mehr: Abschnitt "Die Überblendung", Stichwort "Timing ĂŒberprĂŒfen") ausgestattet:

CSS

/* Wrapper fĂŒr "in-page-slideshows" */
#slideshow_wrapper {
  background:red;
  position:relative;
  width:100%;
  height:500px;       /* Beispielwert! */
  max-height:100vh;   /* fĂŒr Smartphones */
}

/* Wrapper fĂŒr "background-slideshows" */
#slideshow_wrapper {
  background:red;
  position:fixed;
  width:100%;
  height:100%;
}

Die erste Variante ist ein div, welches sich relative positioniert in die anderen DOM-Objekte einfĂŒgt, die Höhe (height) ist dabei variabel festsetzbar, die max. Höhe (max-height) verhindert zu große Darstellungen auf kleinen Bildschirmen.

Die zweite Variante ist eine fĂŒr eine bildschirm- (bzw. browserfenster-) fĂŒllende Variante (position:fixed und height:100%;).

Die "unodered list" ul soll ohne AufzĂ€hlingszeichen (list-style:none;)  und absolut positioniert den ganzen Wrapper einnehmen (via position, width, height, top, right, bottom, left, margin, padding). Das overflow:hidden; ist sinnvoll, um bei skalierten und/oder gedrehten Bildern deren "ĂŒberstehende" RĂ€nder und Ecken abzuschneiden.

CSS

.slideshow {
  list-style:none;
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow:hidden;
}

Die Slides werden durch die "list items" li reprĂ€sentiert. Diese werden ebenfalls absolut positioniert und auf maximale GrĂ¶ĂŸe gebracht (position, height, width, top, right, bottom, left). Die Bilder werden via Hintergrundbild in die Slides eingebastelt:

CSS

.slideshow li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent url(01.jpg) no-repeat center center / cover;
}

Die "shorthand property" fĂŒr den Hintergrund kann ich hier gerne mal aufdröseln, um sie evtl. besser verstĂ€ndlich zu machen:

CSS

.slideshow li {
  ...
  background-color: transparent;
  background-image: url(01.jpg);
  background-repeat: no-repeat;
  background-position: center center;     /* horizontal, vertikal */
  background-size: cover;
}

Das Bild wird also horizontal und vertikal zentriert (background-position: center center;) und mit der GrĂ¶ĂŸenangabe background-size:cover; versehen, so dass es den zu VerfĂŒgung stehenden Platz immer ausfĂŒllt.

Das heißt aber auch: Ist das Bild nicht hoch und/oder breit genug, um den Container auszufĂŒllen, wird es so groß skaliert, bis es passt. Wenn das Bild ein anderes SeitenverhĂ€ltnis hat als der Container, steht es beim Hochskalieren dann aber aus diesem heraus. Hier ist hier das oben erwĂ€hnte overflow:hidden; der ul.slideshow dafĂŒr verantwortlich, dass die ĂŒberstehenden Bildbereiche ausgeblendet werden.

Um nicht zu viel CSS zu schreiben, gruppiere ich die fĂŒr alle Slides geltenden Regeln in einer allgemeinen Definition fĂŒr alle .slideshow li’s, die speziellen weise ich dagegen den :nth-child-Pseudoklassen zu. Optional kann man auch den li’s im HTML z.B. durchnummerierte Klassen mitgeben, z.B. .slide01, .slide02, usw., um diese ohne Pseudoklassen anzusprechen.

CSS

.slideshow li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: transparent;
  background-size: cover;
  background-position: center center;
}

.slideshow li:nth-child(1)  {background-image: url(01.jpg);}
.slideshow li:nth-child(2)  {background-image: url(05.jpg);}
.slideshow li:nth-child(3)  {background-image: url(06.jpg);}
.slideshow li:nth-child(4)  {background-image: url(08.jpg);}
.slideshow li:nth-child(5)  {background-image: url(09.jpg);}
.slideshow li:nth-child(6)  {background-image: url(10.jpg);}
.slideshow li:nth-child(7)  {background-image: url(13.jpg);}
.slideshow li:nth-child(8)  {background-image: url(15.jpg);}
.slideshow li:nth-child(9)  {background-image: url(17.jpg);}
.slideshow li:nth-child(10) {background-image: url(20.jpg);}

So weit, so gut. Die allererste Slide wird angezeigt, ist "wrapper-fĂŒllend" skaliert und positioniert:

  • Slide01
  • Slide02
  • Slide03
  • Slide04
  • Slide05

Was fehlt? Ach ja, klar:

4. Die Animation

Das "Kind braucht einen Namen", z.B. animation-name: slideShow;, soll nicht ein- und/oder ausschwenken sondern linear ablaufen (animation-timing-function: linear;), unendlich oft (animation-iteration-count: infinite;) wiederholt werden und ohne verzögerung starten (animation-delay: 0s;). Bei 10 Bildern und einer Anzeigedauer von – sagen wir einmal – 5 Sek. je Bild dauert der Spaß insgesamt die animation-duration: 50s; (nĂ€mlich: 10 Bilder * 5s = 50s).

Daher fĂŒge ich der .slideshow li folgendes hinzu:

CSS

.slideshow1 li {
  [... bisheriges CSS ...]
  animation-name: slideShow
  animation-duration: 50s;
  animation-timing-function: linear;
  animation-interation-count: infinite;
  animation-delay: 0s;

  /* shorthand */
  animation: slideShow 50s linear infinite 0s;

  opacity: 0;
}

Da der Slide-Übergang mittels Deckkraft animiert wird, setze ich diese hier schon einmal auf 0 (opacity:0;).

4.1 Die Überblendung

Jetzt benötigt unsere Animation slideShow noch Angaben dazu, wer wann wie animiert werden soll. Das passiert mittels sog. Keyframes. DafĂŒr muss man mehrere SchlĂŒsselbilder (mind. 2) definieren, welche mithilfe einer Prozentangabe zeitlich in der animation-duration platziert werden. Beispiel: Drei Keyframes (Anfang, Mitte und Ende) innerhalb des CSS mit 0%, 50% und 100% wĂŒrden bei einer Animationsdauer von 50 Sekunden in etwa (s.u.) den den Zeitpunkten "Sekunden 0", "Sekunde 25" und "Sekunde 50" entsprechen und folgendermaßen notiert:

CSS

@keyframes slideShow { 
  0% {
    [ Zustand ]
  }
  50% {
    [ Zustand ]
  }
  100% {
    [ Zustand ]
  }
}

Die Keyframes enthalten also eine Zustandsbeschreibung des DOM-Objektes, welchem die Animation zugeordnet ist. Die Animation selber (also die "ZwischenzustĂ€nde") berechnet der Browser netterweise eigenstĂ€ndig und zeigt sie als Bewegung. 🙂

Bei den Prozentangaben in Relation zur Zeit kommt es mir manchmal so vor, als ob 100% von 50 Sekunden nicht bei der Zeitmarke 0:50:00 sondern bei der Zeitmarke 0:50:99999… liegt. Im Beispiel entsprĂ€che der Keyframe 25% also eher der Zeitmarke 0:25:50. Die Milisekunden sind nicht immer vernachlĂ€ssigbar…
Weiß da jemand mehr?

Um die Keyframes festzulegen, muss man sich nun mal genau ĂŒberlegen, was denn da eigentlich passieren soll: Die Slides sollen zu Beginn ca. 1 Sek. eingeblendet, 4 Sekunden angezeigt und dann wieder 1 Sek. ausgeblendet werden. WĂ€hrend Slide 1 ausblendet, soll Slide 2 bereits eingeblendet werden. FĂŒr die Slides 2 bis 10 nutzen wir spĂ€ter dafĂŒr eine Verzögerung via animation-delay. Nach der letzten Slide soll wieder mit Slide 1 begonnen werden (daher animation-iteration-count:infinite;).

Wenn ich das mal schematisch darstellen soll, wĂŒrde in etwa so etwas dabei heraus kommen:

Bilder sollen eine Sekunde eingeblendet, vier Sekunden angezeigt und eine Sekunde ausgeblendet werden…

FĂŒr das erste Bild heißt das:

Keyframe bei Sekunde 0 mit Deckkraft 0%,
Keyframe bei Sekunde 1 mit Deckkraft 100%,
Keyframe bei Sekunde 5 mit Deckkraft 100%,
Keyframe bei Sekunde 6 mit Deckkraft 0%.

Um nun die Keyframes ĂŒber die animation-duration (= 50 Sek.) in Prozent angeben zu können, muss ich also nur ein wenig rechnen:

Sek. 0 von 50s = 0%,
Sek. 1 von 50s ~ 2%,
Sek. 5 von 50s ~ 10%,
Sek. 6 von 50s ~ 12%.

Die Keyframes incl. der Deckkraft notiere ich also folgendermaßen:

CSS

@keyframes slideShow {
  0% {
    opacity:0;
  }
  2% {
    opacity:1;
  }
  10% {
    opacity:1;
  }
  12% {
    opacity:0;
  }
}

… und die Verzögerung fĂŒr die folgenden Bilder schreibe ich wieder in die :nth-child()-Pseudoklassen der "list items":

CSS

.slideshow li:nth-child(1)  { ... animation-delay:  0s;}
.slideshow li:nth-child(2)  { ... animation-delay:  5s;}
.slideshow li:nth-child(3)  { ... animation-delay: 10s;}
.slideshow li:nth-child(4)  { ... animation-delay: 15s;}
.slideshow li:nth-child(5)  { ... animation-delay: 20s;}
.slideshow li:nth-child(6)  { ... animation-delay: 25s;}
.slideshow li:nth-child(7)  { ... animation-delay: 30s;}
.slideshow li:nth-child(8)  { ... animation-delay: 35s;}
.slideshow li:nth-child(9)  { ... animation-delay: 40s;}
.slideshow li:nth-child(10) { ... animation-delay: 45s;}

So wird die jeweils folgende Slide mit der gleichen Animation (slideShow) animiert, diese wird allerdings jeweils 5 Sekunden spĂ€ter gestartet. Wenn ich mich bei den Prozent-Angaben zu den Keyframes fĂŒr das Ausblenden nicht völlig verrechnet habe, sollte das Einblenden der jeweils folgenden Slide mit dem Ausblenden der jeweils vorherigen zusammenfallen. Die letzte Slide wird dann also ab Sek. 45 animiert und ab Sek. 50 ausgeblendet, so dass es beim erneuten Einblenden der Slide 1 keinen harten Übergang gibt.

So siehts nun aus:

  • Slide01
  • Slide02
  • Slide03
  • Slide04
  • Slide05
  • Slide06
  • Slide07
  • Slide08
  • Slide09
  • Slide10

Ob das Timing der Überblendungen passt, kann man – wie oben angedeutet – mit einer auffĂ€lligen Hintergrundfarbe des Containers (#slideshow_wrapper) ĂŒberprĂŒfen. Wenn nĂ€mlich die eine Slide bereits aus-, die folgende aber noch nicht eingeblendet ist, sieht man den (hier: roten) Hintergrund durchscheinen. Dann kann man

  • die letzten Keyframes evtl. zeitlich etwas nach hinten korrigieren oder
  • eine neutrale Hintergrundfarbe (z.B. schwarz, grau oder weiß) nutzen. 🙂

4.2 Die Bewegung

Neben der Überblendung gibt eine kleine (wirklich: Hier ist weniger mehr!) Bewegung der Slideshow den letzten Schliff. DafĂŒr nutze ich eine Skalierung (transform: scale()) und eine Drehung (transform:rotate()).

Diese lege ich an den bereits bestehenden Keyframes ganz am Anfang bzw. ganz am Ende der Animation fest; so verlĂ€uft die Bewegung auch ĂŒber die Ein- und Ausblendung hinaus konstant. Bei der Kombination mehrerer CSS-Transformationen schreibt man alle in eine Deklaration. Hier wird also eine Skaierung (von scale(1.1); zu scale(1.3);) und eine Drehung um 3 Grad (von rotate(-1.5deg); zu rotate:(1.5deg);) kombiniert.

CSS

@keyframes slideShow1 { 
  0% {
    opacity: 0;
    transform: scale(1.1) rotate(-1.5deg);
  }
  2% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  12% {
    opacity: 0;
    transform: scale(1.3) rotate(1.5deg);
  }
}

Hier. Version 1 ist fertig:

  • Slide01
  • Slide02
  • Slide03
  • Slide04
  • Slide05
  • Slide06
  • Slide07
  • Slide08
  • Slide09
  • Slide10

5. Variationen

Die Version 1 und ein paar weitere Spielereien gibt es hier zum Download:

Beispiel 1: Der "Standard" von oben. 10 Bilder, je 5 Sek., mit Blende, Zoom und Drehung – Download hier

Beispiel 2: Slideshow als Hintergrund im "Vollbild" – Download hier

Beispiel 3: Kombination von zwei verschiedenen Animationen fĂŒr gerade und ungerade Slides – Download hier

Beispiel 4: "Laufband" statt Überblendung – Download hier
… und wegen dieser Frage noch ein BSP 4b: "Laufband" mit Links – Download hier

Beispiel 5: ZusĂ€tzliche Animation von Texten – Download hier

Beispiel 6: Alles bewegt sich! – Download hier

Viel Spaß beim Basteln 🙂

Nachtrag: In einem anderen Projekt bin ich beinahe daran verzweifelt, warum der Internet Explorer 11 die Animation ums sprichwörtliche Verrecken nicht abspielen wollte. An dieser Stelle habe ich einen wertvollen Hinweis zur Platzierung der @keyframe-Section innerhalb des Stylesheets gefunden: Je weiter vorne, desto eher IE-UnterstĂŒtzung. ?

"Animierte Slideshows" von Martin Smaxwil ist unter einer CC BY 4.0-Lizenz veröffentlicht.
DarĂŒber hinausgehende Hinweise zu Bestandteilen wie Code Snippets u.Ă€. findet man hier.


Deprecated: Die Datei Theme ohne comments.php ist seit Version 3.0.0 veraltet und es ist keine Alternative verfĂŒgbar. Bitte fĂŒge ein comments.php-Template zu deinem Theme hinzu. in /home/medienma/public_html/wp-includes/functions.php on line 5653

8 Antworten zu “Animierte Slideshows”

  1. Frank sagt:

    Großartiges Tutorial.

    Danach hab ich ewig gesucht. es gibt tausende Slider Tutorials, aber nirgends ist es besser erklÀrt als hier.

  2. Hans sagt:

    Super animierte Slideshow, leider lÀufts bei mir nicht, bin am verzweifeln.

  3. Hans sagt:

    Vielen Dank fĂŒr das Angebot, habe es nach 4 Stunden doch noch hinbekommen. FĂŒr heute reicht es.
    Schönen Abend.

  4. Lena sagt:

    Der slider ist spitze!
    Gibt es die Möglichkeit, Links auf die einzelnen Sliderbilder zu setzen? Also das diese auf verschiedene Unterseiten verlinkt werden?

    Danke schonmal fĂŒr die RĂŒckmeldung!

    Lg lena

    • Martin Smaxwil sagt:

      Hallo. Prinzipiell kann man "einfach" in jeden Listenpunkt einen Hyperlink einbauen. Allerdings wird das Ein- und Ausblenden in dem meisten Beispielen mittels opacity gemacht. Dabei werden die Slides fĂŒr den/die Betrachter:in ausgeblendet, im Code bleiben sie aber stehen und fĂŒr den Browser sind sie auch "noch da". Daher wĂŒrde jede Slide immer den Link der letzten Slide aufrufen, das liegt am stacking context (Details) von absolut positionierten Elementen, bei denen das letzte Element als oberstes gerendert wird.
      Bei visibility:hidden hĂ€tte man das gleiche Problem wie bei opacity:0, mit display:none oder z-index könnte man das bestimmt lösen, die Eigenschaften sind aber nicht oder nur ĂŒber Umwege zu animieren. 🙁

      Es funktioniert aber mit der Slideshow aus Beispiel 4, bei dem die Slides horizontal verschoben werden. Dann wird der Link einfach mit der Slide mitverschoben. Ein Beispiel 4b habe ich als Vorlage im Abschnitt "Variationen" hinzugefĂŒgt.
      Hoffe, das hilft?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home/medienma/public_html/wp-content/plugins/simple-lightbox/includes/class.utilities.php on line 545