Bilder im Internet/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.

In diesem Kapitel lernen Sie, wie Sie ein Bilderkarussell mit CSS gestalten.

Bevor Sie diese Technik auf Ihrer Webseite übernehmen, sollten Sie sich aber über die Nachteile eines Karussells im Klaren sein:

  • Inhalte sind nicht sofort ersichtlich und (mindestens) einen Klick oder Wischer vom Nutzer Ihrer Seite entfernt.
  • Viele Nutzer warten nicht den Durchlauf eines Karussells ab, sondern verlassen die Seite vorher.
  • Manchen geht eine solche Animation zu langsam und wollen weiter klicken - anderen geht es zu schnell oder leiden gar unter den schnellen Bewegungen, so wäre es empfehlenswert zu überprüfen, ob diese Nutzer die Benutzereinstellung prefers-reduced-motion gewählt haben. Dann könnte man die Animation abstellen oder nur auf Benutzerwunsch starten (siehe Fazit).

Bilderkarussell

HTML-Grundstruktur

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

Beispiel ansehen …
<div class="gallery">
  <figure>
    <img src="" alt="">
    <figcaption>Bilderklärung</figcaption>
  </figure>
  ...
</div>
ansehen …

CSS: Ausrichtung und Position

Beispiel 
.gallery {
  width: 20em;
  height: 15em;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 40em)  { 
.gallery {
  width: 40em;
  height: 30em;
}
}

@media (max-width: 60em)  { 
.gallery {
  width: 60em;
  height: 45em;
}
}
  
.gallery figure {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.gallery figcaption {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: white;
}

.gallery img {
  width: 100%;
  margin: 0;
  padding: 0;  
}

Damit die Bilder genau in das div mit der Klasse slider passen, werden Innen- und Außenabstände von .gallery figure und .gallery img auf 0 gesetzt.

Die Höhe des Bildwechslers wird nun mit height auf 75% der Breite festgelegt. Da das Elternelement main keine feste Höhe hat, können hier leider keine Prozentwerte verwendet werden. Als Notbehelf werden nun 2 Breakpoints festgelegt, bei denen das Karussell mittels media queries entsprechend größer dargestellt wird.

Außenliegende Inhalte werden mit overflow: hidden ausgeblendet.

Die Bildunterschrift wird mit position: absolute etwas oberhalb des unteren Bildrands positioniert.

CSS: Animation

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

Beispiel ansehen …
.gallery figure {
  height: 100%;
  animation: slide 18s infinite ease-in-out;
}

.gallery:hover figure {
  animation-play-state: paused;
}
ansehen …

Es wird nun eine Animation mit dem Namen slide aufgerufen, die 18s dauert und durch den Wert infinite unendlich oft wiederholt wird. Der Wert ease-in-out sorgt für einen Übergang mit einem langsamen Start und Ende.

Sie können auch die Einzeleigenschaften verwenden:

Falls jemand mit der Maus über dem Slider verharrt, wird die Eigenschaft

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

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

Beispiel ansehen …
@keyframes slide {
    0%     {top: 0}
    12%  {top: 0}
    16%  {top: -100%}
    28%  {top: -100%}
    32%  {top: -200%}
    44%  {top: -200%}
    48%  {top: -300%}
    60%  {top: -300%}
    65%  {top: -400%}
    78%  {top: -400%}
    83%  {top: -500%}
    95%  {top: -500%}
    100% {top: 0}
}
ansehen …

Die @keyframes-Regel wird durch den Namen slide aufgerufen.

Die Prozentangaben stellen die einzelnen Animationsschritte dar. In den geschweiften Klammern finden Sie nun die CSS-Eigenschaft top, die die Position der einzelnen figure-Elemente festlegt.

Wenn die Animation aufgerufen wird, animiert sie dann das figure-Element anhand der angegebenen Werte. Anfänglich ist das erste figure-Element für 12% der Animationsdauer sichtbar und wird dann innerhalb von 4 % der Animationsdauer nach oben geschoben.

Die Werte für die einzelnen keyframes müssen Sie leider mit der Hand ausrechnen und bei einer Änderung der Anzahl der Bilder aktualisieren.

Fazit

Einerseits ist es problemlos möglich, mehrere Bilder mit CSS-animation in einem Karussell ein- und ausschweben zu lassen. Andererseits gibt es neben dem Pausieren keine weiteren Steuerungsmöglichkeiten und viele Festlegungen der Animation befinden sich im CSS-Code, der dann bei Änderungen des Inhalts entsprechend angepasst werden müsste. Dazu kommt die Problematik, dass seitenfüllende Bilder angesichts der Vielzahl von möglichen Viewports nur schwer möglich sind.

Mit dem Checkbox-Hack können Sie eine Steuerung erreichen, wie in diesem Codepen-Beispiel von Marc Haunschild. Diese Funktionalität erhöht die Komplexität des CSS aber erneut um ein Vielfaches.

Bequemer und eleganter geht dies aber doch mit JavaScript, wie Sie in folgenden Tutorials sehen können.


Image-Fader

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

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

CSS: Ausrichtung und Position

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

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

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; transparent. Es wird bis 20% 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 20%-40% ein langsames Transparentwerden des oberen Bildes und Aufdecken des darunter befindlichen Bildes.

Nachdem ein Set von keyframes komplett durchlaufen wurde, beginnt die Abfolge von vorn. Nach 15 Sekunden wird das Bild also langsam wieder sichtbar.

Um zu vermeiden, dass dabei der Hintergrund sichtbar wird, müssen die Prozentpunkte der Keyframes genau auf die Anzahl der Bilder abgestimmt sein. Dazu mehr im folgenden Abschnitt.

Taktung der Animation

In einigen Beispielen im Web bekommt jedes Bild seine eigene Animation. Einfacher ist es aber, die vorliegende Animation mehrfach aufzurufen und zeitversetzt zu starten. Der Zeitversatz hängt damit von der Anzahl der Bilder in der Animation ab. In unserem Beispiel verwenden wir drei Bilder, die alle 5 Sekunden wechseln sollen. Deswegen beträgt die Gesamtdauer der Animation 15 Sekunden, das zweiten Bildes wird um 5 Sekunden und das dritten Bild um 10 Sekunden verzögert.

Durch die Einteilung der Keyframes ergibt sich für die Sichtbarkeit der einzelnen Bilder das folgende Diagramm:

Taktung der Animation

So erklären sich auch die Prozentangaben für die Keyframes. Das zweite Bild beginnt die Animation, wenn das erste Bild bei 33% ist. Um einen fließenden Übergang zu erhalten, muss es eine Zeit geben, in der beide Bilder teiltransparent sind. Durch die volle Sichtbarkeit in der Zeit von 20% bis 40% ergibt sich eine Teiltransparenz in der Zeit von 40% bis 53% des ersten Bildes. Danach ist das zweite Bild voll sichtbar.

Beispiel ansehen …
.gallery figure:nth-of-type(2) {
  animation-delay: 5s;
}
.gallery figure:nth-of-type(3) {
  animation-delay: 10s;
}
ansehen …

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.


Umrechnen für andere Bilderanzahl

Die im Beispiel genannten Zahlen sind für drei Bilder ausgelegt. Will man eine andere Anzahl animieren, muss man die angegebenen Zeiten umrechnen. Dafür dient die folgende Herleitung (wenn Sie sie nicht verstehen, ist das nicht schlimm, unten steht das Ergebnis):

Wichtige Zeitpunkte im Animationsablauf
Zeitpunkt Bild 1 Bild 2
0% Fade-In beginnt
20% Fade-In endet
33% Fade-In beginnt
40% Fade-Out beginnt
53% Fade-In endet
60% Fade-Out endet
73% Fade-Out beginnt

Das zweite Bild wird ab d=33% oder 1/3 der gesamten Zyklusdauer eingeblendet (d wie delay). Im Vergleich dazu beginnt die volle Sichtbarkeit des ersten Bildes bei t1=20% (1/5) und endet bei t2=40% (2/5) der Zyklusdauer. Bei t2 beginnt der Fade-Out und endet bei t3=60% (3/5). Wir brauchen jetzt die Relation, in der t1, t2, t3 und d zueinander stehen. Das Verhältnis von t1 zu d beträgt 1/5 geteilt durch 1/3, ergibt 3/5. t1 muss also 3/5 von d betragen. Die Keyframes liegen im gleichen Abstand, die weiteren Zeitpunkte sind also das Doppelte und das Dreifache von t1.

Animiert man nun beispielsweise 10 Bilder, beträgt der Versatz zwischen den Bildern d=100/10=10% der Zykluslänge. 3/5 von 10% sind 6%, und damit ergibt sich als @keyframes-Definition

Die @keyframes-Regel für 10 Bilder 
@keyframes wechseln {
    0% {opacity: 0;}
    6% {opacity: 1;}
   12% {opacity: 1;}
   18% {opacity: 0;}
  100% {opacity: 0;}
}
Taktung der Animation für 10 Bilder

Varianten mit Zoom

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

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

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

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

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

@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) { 
  animation: wechseln 15s 10s infinite;
}

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

.gallery figure:nth-of-type(6) {  
  animation: wechseln 15s infinite;
}
ansehen …
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.

Fazit

Wie im ersten Beispiel muss gesagt werden, dass es zwar möglich ist, Bilder mit CSS-animation in einem Fader ein- und auszublenden. Andererseits gibt es keine weiteren Steuerungsmöglichkeiten und viele Festlegungen der Animation befinden sich hartkodiert im CSS-Code, der bei Änderungen des Inhalts entsprechend angepasst werden müsste. Dazu kommt die Problematik, dass seitenfüllende Bilder angesichts der Vielzahl von möglichen Viewports nur schwer möglich sind.

Bequemer und eleganter geht dies aber doch mit JavaScript, wie Sie in folgenden Tutorials sehen können.


Weblinks

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Bilder_im_Internet/Bildwechsler&oldid=87863“