Bilder im Internet/Bildwechsler
Text-Info
- 30min
- mittel
- Kenntnisse in
● Einstieg in CSS
● CSS-Animations
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).
Inhaltsverzeichnis
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.
<div class="gallery">
<figure>
<img src="" alt="">
<figcaption>Bilderklärung</figcaption>
</figure>
...
</div>
CSS: Ausrichtung und Position
.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.
.gallery figure {
height: 100%;
animation: slide 18s infinite ease-in-out;
}
.gallery:hover figure {
animation-play-state: paused;
}
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:
-
animation-name: slide;
-
animation-duration: 18s;
-
animation-iteration-count: infinite;
-
animation-timing-function : ease-in-out;
Falls jemand mit der Maus über dem Slider verharrt, wird die Eigenschaft
-
animation-play-state: paused;
aktiviert und die Animation wird unterbrochen.
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.
@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}
}
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.
- Bildwechsler im DOM-Tutorial
- Komfort-Bildwechsler
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.
<div class="gallery">
<figure>
<img src="" alt="">
<figcaption>morgens</figcaption>
</figure>
...
</div>
CSS: Ausrichtung und Position
.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.
Animation
Für die Animation verwenden wir die zusammenfassende CSS3-Eigenschaft animation.
.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:
animation-name: wechseln;
animation-duration: 30s;
animation-iteration-count: infinite;
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.
@keyframes wechseln {
0% {opacity: 0;}
20% {opacity: 1;}
40% {opacity: 1;}
60% {opacity: 0;}
100% {opacity: 0;}
}
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:
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.
.gallery figure:nth-of-type(2) {
animation-delay: 5s;
}
.gallery figure:nth-of-type(3) {
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.
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):
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
@keyframes wechseln {
0% {opacity: 0;}
6% {opacity: 1;}
12% {opacity: 1;}
18% {opacity: 0;}
100% {opacity: 0;}
}
Varianten mit Zoom
Im vorliegenden Beispiel werden die Bilder durch transform: scale(0,0);
bis zur Unsichtbarkeit verkleinert und gleichzeitig ausgeblendet..
@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;
}
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.
- Bildwechsler im DOM-Tutorial
- Komfort-Bildwechsler
Weblinks
- should i use a carousel?
- creativebloq: Create a carousel out of nothing but CSS
- benschwarz: Gallery CSS (not a script to be found)
- desandro.github.io: Carousel sehr gutes und anschauliches Tutorial zu 3d-transforms, das für die Interaktion aber JavaScript benötigt
- justcapelle: Tabbed image gallery (Auswahl mit Checkbox-Hack)
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.