Webdesign - CSS3 Slider mit Transitionen und Keyframe-Animationen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Kleines Cottage
Kleines Cottage mit Reetdach
Weiler Runch
Der Weiler Runch
Gerfalke
Gerfalke
Wollkopfgeier
Wollkopfgeier
Lobiser-Schupfen
Lobiser-Schupfen

Photos © Monika & Klaus Franz

Wie realisiert man einen CSS3 Slider ohne JavaScript?

28Sep2014

CSS3 Slider mit CSS3-Transitionen und Keyframe-Animationen.


Mit einem animierten Cycle Slider kann man sehr stilvoll seine Bilder oder sein Portfolio präsentieren. Im Internet gibt es bereits sehr viele unterschiedliche Arten von Slider, die zum Teil mit Hilfe von jQuery-Plugins oder JavaScript (objektorientierte Programmiersprache) animiert werden. Es stehen dabei viele Varianten der Navigation und Überblendungseffekte zur Auswahl. Aber Dank CSS3 (Cascading Style Sheet) kann man einen solchen Slider auch völlig ohne JavaScript (objektorientierte Programmiersprache) und nur mit CSS3 (Cascading Style Sheet)-Transitionen und Keyframe-Animationen realisieren.
Die "Kleine Diashow" hatte ich bereits nur mit CSS3 (Cascading Style Sheet) aufgebaut und letztendlich ist das schon eine Art "Cycle Slider" oder auch "Content Slider" bei dem die Bilder mit einem Fade-Effekt überblendet werden.

Auf dieser Seite möchte ich nun einen Slider integrieren der konkrete Anforderungen erfüllt.

Anforderungen

  • Die Bilder sollen das sichtbare Bild aus einer beliebigen Richtung wegschieben
  • Es soll ein Fortschrittsbalken beim Laden der einzelnen Bilder eingeblendet werden
  • Sobald man mit dem Mauszeiger über das Bild geht, soll eine Überschrift in grau und als Großbuchstaben eingeblendet werden. Außerdem soll dabei die Animation stoppen damit der Betrachter die Möglichkeit hat, das Bild länger anzuschauen oder um einen längeren Text zu lesen. Es erscheint dabei in der rechten oberen Ecke ein "Pausen-Zeichen"
  • Um die ganze Präsentation soll, wie auf diesen Seiten üblich, ein Rahmen und ein Schatten gelegt werden

Da ich neben den Bildern auch Begleittexte einblenden möchte, werde ich den HTML5 (HyperText Markup Language)-Code aus der "kleinen Diashow" mit "figure-Elemente" aufbauen und noch um zusätzliche "figcaption-Elemente" erweitern. Im ersten Ansatz hatte ich den Slider mit "div-Container" und fünf unterschiedlichen Namen aufgebaut, aber so ist es eleganter und einfacher realisiert.
Für den Fortschrittsbalken am unteren Rand des Sliders benötigt man einen separaten "div-Container" mit dem Namen "laden", wie auch für das "Pausen-Zeichen" mit dem Namen "pause". Aber insgesamt bleibt das HTML5 (HyperText Markup Language)-Gerüst sehr übersichtlich und ist für alle Beispiele gleich aufgebaut.

<div id="stapel">
    <figure>
        <img src="bilder600/Cottage.jpg" width="600"
             height="400" alt="Kleines Cottage">
        <figcaption>Kleines Cottage mit Reetdach</figcaption>
    </figure>
    <figure>
        <img src="bilder600/Runch.jpg" width="600"
             height="400" alt="Weiler Runch">
        <figcaption>Der Weiler Runch</figcaption>
    </figure>
    <figure>
        <img src="bilder600/Gerfalke.jpg" width="600"
             height="400" alt="Gerfalke">
        <figcaption>Gerfalke</figcaption>
    </figure>
    <figure>
        <img src="bilder600/Wollkopfgeier.jpg" width="600"
             height="400" alt="Wollkopfgeier">
        <figcaption>Wollkopfgeier</figcaption>
    </figure>
    <figure>
        <img src="bilder600/Lobiser-Schupfen.jpg" width="600"
             height="400" alt="Lobiser-Schupfen">
        <figcaption>Lobiser-Schupfen</figcaption>
    </figure>
    <div class="laden"></div>
    <div class="pause"></div>
</div>

Das Platzieren der Bilder und der Aufruf der Animation werden genau wie bei der "kleinen Diashow" erstellt. Aber da wir noch einen Begleittext einblenden, fällt das CSS3 (Cascading Style Sheet) bei dem Slider etwas aufwendiger aus.
Da beim Überfahren der Bilder mit der Maus die Animation stoppen soll, blende ich als Cursor mit der Angabe "cursor: pointer" das Symbol einer Hand ein. Und weil die Bilder, wie auch der Begleittext, in den Rahmen hinein gleiten wird die Angabe "overflow: hidden" im Container "#stapel" benötigt.
Die Bilder werden, wie schon bei der kleinen Diashow, absolut ausgerichtet und mit der Angabe "opacity: 0" ausgeblendet.
Die Begleittexte sind mit dem HTML5 (HyperText Markup Language)-Element "figcaption" gekennzeichnet. Hier wird die Schriftfarbe, Schriftart und der Textschatten bestimmt, außerdem wird die Größe und die Örtlichkeit der Schriftbox bestimmt. Zuerst ist der Text außerhalb des Rahmens und erst wenn der Mauszeiger über dem Bild erscheint wird der Text innerhalb von einer halben Sekunde von links nach rechts eingeblendet.

#stapel {
    position: relative;
    background: #000;
    height: 25em;
    width: 37.5em;
    margin: 1em auto -2em;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    cursor: pointer;
    overflow: hidden;
}

#stapel figure {
    position: absolute;
    margin: 0;
    height: 25em;
    width: 37.5em;
    opacity: 0;
}

#stapel figcaption {
    position: relative;
    color: #444;
    font: 1.5em/2.9 serif;
    text-transform: uppercase;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    border-left: 0;
    height: 2.9em;
    width: 12.4em;
    bottom: 80px;
    left: -320px;
    transition: .5s;
}

#stapel:hover figcaption {
    left: 0;
}

Fortschrittsbalken

Das nächste was im CSS3 (Cascading Style Sheet) definiert wird, ist der "Fortschrittsbalken". Und das ist nun wirklich kein Hexenwerk.
Es ist ein einfacher "div-Container" der am unteren Rand des Sliders mit einer Höhe von 2 Pixel platziert wird und dieser erhält eine Animationszeit von 6 Sekunden. Während dieser Zeit wird die Breite des Containers von 0% nach 100% vergrößert und die Farben eines Regenbogens dargestellt, also relativ einfach umgesetzt. Und damit der Balken immer sichtbar ist, wird der "div-Container" mit "z-index: 2" in den Vordergrund gesetzt.

.laden {
    position: relative;
    background: linear-gradient(90deg,#f00,#ffa500,#ff0,
                                #008000,#00f,#800080);
    width: 37.5em;
    height: .125em;
    bottom: -398px;
    animation: balken 6s ease-out infinite;
    z-index: 2;
}

@keyframes balken {
      0% {width:   0; opacity: 0;}
     10% {width:   0; opacity:.2;}
     80% {width:100%; opacity:.8;}
    100% {width:100%; opacity: 0;}
}

Und hier sieht man einen Fortschrittsbalken in Aktion.


Pausen-Zeichen

Nun wird das "Pausen-Zeichen" umgesetzt.
Da das Zeichen, zwei großgeschriebene I-Buchstaben, über dem Bild positioniert werden soll, wird der Container mit der Angabe "position: absolute" versehen. Erst nachdem der Mauszeiger über dem Bild verweilt, wird das "Pausen-Zeichen" mit "opacity: 1" innerhalb einer halben Sekunde eingeblendet und mit "z-index: 2" in den Vordergrund gesetzt.

.pause {
    position: absolute;
    top: 5px;
    left: 570px;
    color: #eee;
    font: bolder 1.3em/2 Impact;
    opacity: 0;
    transition: .5s;
    z-index: 2;
}

.pause:after {
    content: 'I I';
}

#stapel:hover .pause {
    opacity: 1;
}

CSS3-Transitionen und Keyframe-Animationen

Aber jetzt kommt der wirklich interessante Teil des CSS3 (Cascading Style Sheet).
Für die Dauer der kompletten Animation, das heißt das Einblenden aller fünf Bilder, habe ich wieder 30 Sekunden mit gestaffelten Startzeiten gewählt und die Animation mit "animation: infinite" als Endlosschleife deklariert. Für den Aufruf der @keyframes-Regel verwende ich wieder die Pseudo-Klasse "nth-of-type".
Und beim Überfahren der Bilder mit dem Mauszeiger soll die Animation letztendlich stoppen.
Bei den "@keyframes-Regeln" wird durch die Angabe "top: ?px" das Ein- und Ausfahren der Bilder sowie mit "opacity: 1/0" die Sichtbarkeit eingestellt.

#stapel figure:nth-of-type(1) {
    animation: bild 30s ease-in-out infinite;
}
#stapel figure:nth-of-type(2) {
    animation: bild 30s 6s ease-in-out infinite;
}
#stapel figure:nth-of-type(3) {
    animation: bild 30s 12s ease-in-out infinite;
}
#stapel figure:nth-of-type(4) {
    animation: bild 30s 18s ease-in-out infinite;
}
#stapel figure:nth-of-type(5) {
    animation: bild 30s 24s ease-in-out infinite;
}

#stapel:hover figure,
#stapel:hover .laden {
    animation-play-state: paused;
}

@keyframes bild {
      0%,    {top:-400px; opacity:0; z-index:0;}
      6.66%, {top:0;      opacity:1; z-index:1;}
     20%     {top:0;      opacity:1; z-index:1;}
     26.66%  {top: 400px; opacity:0; z-index:0;}
    100%     {top:-400px; opacity:0; z-index:0;}
}

Die Kurzschreibweise der @keyframes-Regel sieht dabei wie folgt aus:

@keyframes bild {
     6.66%,  20% {top:0;      opacity:1; z-index:1;}
    26.66%       {top: 400px; opacity:0; z-index:0;}
        0%, 100% {top:-400px; opacity:0; z-index:0;}
}

Die Prozentangaben werden wieder wie bei der kleinen Diashow berechnet. Und damit auch beim ersten Durchlauf der Animation das Einschieben eines Bildes zu sehen ist, muss das Bild außerhalb des Sliders platziert werden. Die Berechnung sieht wieder wie folgt aus:

A:                 Anzahl der Bilder (5 Bilder)

Z:                 Zeit die ein Bild komplett sichtbar ist (4 Sekunden)

D:                 Dauer einer Überblendung (2 Sekunden)

G = ( Z + D ) * A: Gesamtdauer der Animation (30 Sekunden)

S = G / A:         Staffelung der Startzeiten (6 Sekunden)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{top:-400px; opacity:0;} -                                  = 0%

{top:0;      opacity:1;} - [ 100% * D / G  ]                = 6,66%

{top:0;      opacity:1;} - [ 100% / A ]                     = 20%

{top: 400px; opacity:0;} - [ 100% * ( Z + ( 2 * D ) ) / G ] = 26,66%

{top:-400px; opacity:0;} -                                  = 100%

Das war es auch schon. Der CSS3 (Cascading Style Sheet)-Slider für das Einfliegen der Bilder von oben mit einem Fortschrittsbalken und einer Haltefunktion ist damit fertig.

Kleines Cottage
Cottage
Weiler Runch
Der Weiler Runch
Gerfalke
Gerfalke
Wollkopfgeier
Wollkopfgeier
Lobiser-Schupfen
Lobiser-Schupfen



Um jetzt die Bilder nicht mehr von oben nach unten, sondern von rechts nach links einlaufen zu lassen, muss man lediglich die Angaben von "top: ?px" in "right: ?px" und die entsprechenden Werte dazu ändern.
Im folgenden Beispiel wird das neue Bild über das sichtbare Bild geschoben und außerdem ist die Textanimation etwas anders gestaltet. Diese wird zum Beispiel bei diesem Slider automatisch eingeblendet.
Unten sind nur die geänderten Anweisungen im CSS3 (Cascading Style Sheet) in Bezug zum ersten Beispiel aufgeführt.

#stapel2 figcaption {
    position: absolute;
    color: #444;
    font: 1.5em/2.5 serif;
    letter-spacing: .1em;
    word-spacing: .1em;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    width: 100%;
    animation: t12 6s 2s infinite;
}

@keyframes t12 {
     0%, 80%, 100% {bottom:-65px;}
    15%, 65%       {bottom:  2px;}
}

#stapel2:hover figure,
#stapel2:hover figcaption,
#stapel2:hover .laden {
    animation-play-state: paused;
}

@keyframes bild1 {
     6.66%,  20% {right:0;      opacity:1; z-index:1;}
    26.66%       {right:0;      opacity:0; z-index:0;}
        0%, 100% {right:-600px; opacity:0; z-index:0;}
}
Kleines Cottage
Kleines Cottage mit Reetdach
Weiler Runch
Der Weiler Runch
Gerfalke
Gerfalke
Wollkopfgeier
Wollkopfgeier
Lobiser-Schupfen
Lobiser-Schupfen



Im folgenden Beispiel schiebt das neue Bild das sichtbare Bild aus dem Sichtbereich und die Textanimation ist aus einem der Beispiele für Hover-Effekte entnommen.
Unten sind wieder nur die geänderten Anweisungen im CSS3 (Cascading Style Sheet) in Bezug zum ersten Beispiel aufgeführt.

#stapel3 figcaption {
    position: relative;
    overflow: hidden;
    color: #fff;
    font: 1.3em/2.5 serif;
    letter-spacing: .1em;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
    bottom: 50px;
    opacity: 0;
    transition: 1s;
}

#stapel3 figcaption:after {
    position: absolute;
    bottom: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: .1em;
    background: #fff;
    content: '';
    transition: transform .5s;
    transform: translate3d(-100%,0,0);
}

#stapel3:hover figcaption,
#stapel3:hover figcaption:after {
    opacity: 1;
    transform: translate3d(0,0,0);
}

@keyframes bild3 {
     6.66%,  20% {right:0;      opacity:1; z-index:1;}
    26.66%       {right: 600px; opacity:0; z-index:0;}
        0%, 100% {right:-600px; opacity:0; z-index:0;}
}
Kleines Cottage
Kleines Cottage mit Reetdach
Weiler Runch
Der Weiler Runch
Gerfalke
Gerfalke
Wollkopfgeier
Wollkopfgeier
Lobiser-Schupfen
Lobiser-Schupfen



Im letzten Beispiel dreht sich das neue Bild über das sichtbare Bild. Die Textanimation ist die gleiche wie in dem vorherigen Beispiel.
Unten sind wieder nur die geänderten Anweisungen im CSS3 (Cascading Style Sheet) in Bezug zum ersten Beispiel aufgeführt.

#stapel4 figcaption {
    position: relative;
    overflow: hidden;
    color: #fff;
    font: 1.3em/2.5 serif;
    letter-spacing: .1em;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
    bottom: 50px;
    opacity: 0;
    transition: 1s;
}

#stapel4 figcaption:after {
    position: absolute;
    bottom: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: .1em;
    background: #fff;
    content: '';
    transition: transform .5s;
    transform: translate3d(-100%,0,0);
}

#stapel4:hover figcaption,
#stapel4:hover figcaption:after {
    opacity: 1;
    transform: translate3d(0,0,0);
}

@keyframes bild4 {
     6.66%,  20% {transform:rotate(360deg); opacity:1; z-index:1;}
    26.66%       {transform:rotate(180deg); opacity:0; z-index:0;}
        0%, 100% {transform:rotate(180deg); opacity:0; z-index:0;}
}
Kleines Cottage
Kleines Cottage mit Reetdach
Weiler Runch
Der Weiler Runch
Gerfalke
Gerfalke
Wollkopfgeier
Wollkopfgeier
Lobiser-Schupfen
Lobiser-Schupfen

So lassen sich nun viele verschiedene Möglichkeiten für einen Slider umsetzen. In dem Beispiel am Anfang der Seite ist ein weiterer klassischer CSS3 (Cascading Style Sheet)-Slider dargestellt.

Zum Seitenanfang springen Λ