Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

CSS/Tutorials/Bildwechsler

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
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 …
<figure id="gallery">
  <figure>
    <img src="" alt="">
    <figcaption>morgens</figcaption>
  </figure>
  ...
</figure>

CSS: Ausrichtung und Position[Bearbeiten]

Beispiel
#gallery {
  position: relative;
}

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

#gallery figure:last-of-type {
  position: relative;
}

#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. Das letzte Bild wird relativ positioniert, um Platz für das Bild vorzusehen und nachfolgende Elemente nicht zu verdecken.

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:

Anlegen der einzelnen Animationsschritte[Bearbeiten]

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

Beispiel
@keyframes wechseln {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;}
  100% {opacity: 0;}
}
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: 0; durchsichtig.

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 0% bis 20% ein langsames Sichtbarwerden des oberen und Ausblenden des darunter befindlichen Bildes. Bis 40% bleibt das Bild sichtbar und wird dann von 40% bis 60% wieder ausgeblendet. Bis zum Ende der Animation bleibt das Bild unsichtbar transparent und erlaubt den Blick auf ein darunterliegendes Bild.


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;
  opacity: 0;
}

#gallery figure:nth-of-type(3) {
  animation-delay: 10s;
  opacity: 0;
}
Die Eigenschaft animation-delay erlaubt das verzögerte Starten einer Animation. Für das erste Bild benötigen Sie keine Verzögerung, sehr wohl aber für die folgenden.


Sie werden mit der strukturellen Pseudoklasse nth-of-type angesprochen und erhalten jetzt eine Verzögerung. Nach fünf Sekunden startet nun die Animation für das mittlere Bild und nach weiteren fünf Sekunden die für das letzte Bild.

Zusätzlich werden das zweite und das dritte Bild unsichtbar gemacht.

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]