CSS/Anwendung und Praxis/Bildwechsler

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ein Bildwechsler ist eine Animation, mit der Sie Bilder in einem festen Rhythmus wechseln können. Während ein image-fader Bilder ein-, bzw. überblendet, schiebt ein image-slider die Bilder ein. Früher wurde so etwas mit JavaScript oder jQuery realisiert; aber eine Umsetzung mit CSS ist einfacher, performanter und eleganter.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

HTML-Grundstruktur[Bearbeiten]

Für die HTML-Struktur legen wir 3 Bilder in ein div mit der id gallery. Die Bilder werden von einem figure-Element mit einer zusätzlichen figcaption für eine Bildunterschrift umschlossen.

Beispiel ansehen …
<div id="gallery">
  <figure>
    <img src="" alt="">
    <figcaption>morgens</figcaption>
  </figure>
  ...
</div>

CSS: Ausrichtung und Position[Bearbeiten]

Beispiel
#gallery {
  position: relative;
}

#gallery figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#gallery figcaption {
  position: absolute;
  left: 1em;
  bottom: 0.5em;
  z-index: 2;
}

Durch die absolute Ausrichtung der figure-Elemente werden sie übereinander gelegt. Da die figcaption einen z-index von 2 hat, wird sie über die Bilder gelegt und am unteren Rand ausgerichtet.

Beachten Sie: Da die Bilder übereinanderliegen, ist das dritte Bild nun das oberste. Falls die Reihenfolge der Animation wichtig ist, müssen Sie sie umstellen.

Animation[Bearbeiten]

Für die Animation verwenden wir die zusammenfassende CSS3-Eigenschaft animation.

Beispiel
#gallery figure {
  animation: wechseln 15s infinite;
}
Es wird nun eine Animation mit dem Namen wechseln aufgerufen, die 15s dauert und durch den Wert infinite unendlich oft wiederholt wird.

Sie können auch die Einzeleigenschaften verwenden:

Beachten Sie: Sie benötigen für die Eigenschaft animation für ältere Versionen von Safari und Android noch den Browserpräfix -webkit-, der hier aus Gründen der Vereinfachung weggelassen wurde.

Anlegen der einzelnen Animationsschritte[Bearbeiten]

Zu jeder Animation gehört eine Festlegung der einzelnen Animationsschritte mittels der @keyframes-Regel.

Beispiel
@keyframes wechseln {
    0% {opacity: 1;}
   25% {opacity: 1;}
   40% {opacity: 0;}
   92% {opacity: 0;}
  100% {opacity: 1;}
}
Die @keyframes-Regel wird durch den Namen wechseln aufgerufen.

Die Prozentangaben stellen die einzelnen Animationsschritte dar. In den geschweiften Klammern finden Sie nun die CSS-Eigenschaft opacity, die die Deckkraft (oder Transparenz) festlegt.

Wenn die Animation aufgerufen wird, animiert sie dann das figure-Element anhand der angegebenen Werte. Anfänglich ist das figure-Element bei opacity: 1; deckend und bleibt 25% der Animationsdauer komplett deckend und damit sichtbar.

Damit die Bilder nicht abrupt wechseln, können Sie durch die Festlegung von weichen Übergängen eine langsame Überblendung erreichen. So bewirkt der Bereich von 25%-40% ein langsames Transparentwerden des oberen und Aufdecken des darunter befindlichen Bildes. Am Ende der Animation wird das obere Bild langsam wieder deckend. Diese Festlegung ist nötig, damit das dritte Bild am Ende wieder eingeblendet wird, da ansonsten gegen Ende der Animation alle drei Bilder transparent sind und der Hintergrund sichtbar wird.


Taktung der Animation[Bearbeiten]

In einigen Beispielen im Web bekommt jedes Bild seine eigene Animation. Einfacher ist es aber, die vorliegende Animation mehrfach aufzurufen und zeitversetzt zu starten.

Beispiel ansehen …
#gallery figure:nth-of-type(2) {
  animation-delay: 5s;
}
#gallery figure:nth-of-type(1) {
  animation-delay: 10s;
}
Die Eigenschaft animation-delay erlaubt das verzögerte Starten einer Animation. Für das obere, im HTML-Code dritte Bild benötigen Sie keine Verzögerung, sehr wohl aber für die folgenden Bilder.


Sie werden mit der strukturellen Pseudoklasse first-of-type angesprochen und erhalten jetzt eine Verzögerung. Fünf Sekunden nachdem das erste Bild transparent wird, startet nun die Animation für das mittlere Bild und danach die für das untere, im HTML-Code erste Bild.

Varianten[Bearbeiten]

Zoom[Bearbeiten]

Im vorliegenden Beispiel werden die Bilder durch transform: scale(0,0); bis zur Unsichtbarkeit verkleinert und gleichzeitig ausgeblendet..

Beispiel ansehen …
@-webkit-keyframes bilder {
    
   0% {opacity: 1;} 
  34% {opacity: 1;}
  35% {opacity: 0;}
 100% {opacity: 0;}
}

@keyframes bilder {
    
   0% {opacity: 1;} 
  34% {opacity: 1;}
  35% {opacity: 0;}
 100% {opacity: 0;}
}

#gallery figure:nth-of-type(1) {  
  -webkit-animation: bilder 15s 7s infinite;
  animation: bilder 15s 7s infinite;
}

#gallery figure:nth-of-type(2) {  
  -webkit-animation: bilder 15s 2s infinite;
  animation: bilder 15s 2s infinite;
}

#gallery figure:nth-of-type(3) {  
  -webkit-animation: bilder 15s 12s infinite;
  animation: bilder 15s 12s infinite;
}

@-webkit-keyframes wechseln {
    0% {opacity: 1; transform: scale(1,1); z-index: 20;}
   20% {opacity: 1; transform: scale(1,1);}
   34% {opacity: 0; transform: scale(0,0);}
  100% {opacity: 1; transform: scale(0,0);}
}

@keyframes wechseln {
    0% {opacity: 1; transform: scale(1,1); z-index: 20;}
   20% {opacity: 1; transform: scale(1,1);}
   34% {opacity: 0; transform: scale(0,0);}
  100% {opacity: 1; transform: scale(0,0);}
}

#gallery figure:nth-of-type(4) { 
  -webkit-animation: wechseln 15s 10s infinite;
  animation: wechseln 15s 10s infinite;
}

#gallery figure:nth-of-type(5) {  
  -webkit-animation: wechseln 15s 5s infinite;
  animation: wechseln 15s 5s infinite;
}

#gallery figure:nth-of-type(6) {  
  -webkit-animation: wechseln 15s infinite;
  animation: wechseln 15s infinite;
}
Beachten Sie: Die Bilder werden im HTML-Code doppelt angezeigt, damit nach dem Durchlaufen der Animation kein weißer Hintergrund zu sehen ist. So ist diese CSS-Animation eher ein proof of concept als eine best practice; trotzdem aber eine Alternative zu einer JavaScript-basierten Diashow.

Siehe auch[Bearbeiten]