Link zur Startseite
Homepage von
Dirk Trute
ganz normale Selbstbauprojekte

Einfacher CSS Slider ohne Javascript

Seitennavigation

CSS3 Slideshow

In diesem Beitrag stelle ich die Umsetzung einer einfachen Slideshow als CSS 3 Keyframeanimation vor. Die Animation arbeitet ohne JavaScript bzw. jQuery. Es sind nur einige Zeilen CSS erforderlich.


Einleitung

Auf mehreren Seiten verwende ich über CSS 3 animierte Hintergrundbilder. Die Bilder sind als Hintergrund zur H1 – Überschrift angelegt, da die Bilder nicht unbedingt zum Inhalt der Seite beitragen und deshalb nicht im HTML – Quellcode auftauchen müssen.

Vor ein paar Monaten viel mir ein, auf diese Weise eine Slideshow zur erstellen. Natürlich gibt es so etwas schon auf anderen Seiten, mit und ohne Tutorial. Jedoch selten ohne Javascript bzw. jQuery. Durch die in CSS 3 enthaltene Animationsfunktion "Keyframes" und den Einsatz multipler Hintergrundbilder kann man eine Bildershow auch ohne Javascript mit ein paar Zeilen CSS realisieren.

Allerdings ist zu beachten, dass ich kein Webentwickler bin und dies hier auch nur ein Bastelprojekt ist. Damit möchte ich sagen, dass der Code vermutlich weiter optimiert werden kann.

Erläuterung zur Keyframes - Animation

Eine Keyframe – Animation besteht im CSS – Listing aus zwei Teilen. Der eigentlichen Animation, die mit einer @keyframes Regel und einem eindeutigen Namen für die Animation beginnt. Diese Regel kann in einzelne über Prozentwerte angegebene Schritte unterteilt werden oder mit from {} und to {} zwischen einem Start- und Endpunkt ablaufen. "From" entspricht dabei 0 und "to" 100 Prozent.

Die über Prozentwerte, bzw. über from und to definierten Schritte, enthalten die Formateigenschaften (Styles) der Animation. Diese werden jeweils bei Erreichen des entsprechenden Animationsschrittes auf das betreffende Objekt angewendet. Vorausgesetzt der Betrachter verwendet nicht den Internetexplorer 6 oder schlimmer.

Zu beachten ist, dass eine Eigenschaft die in einem Schritt festgelegt wurde, solange beibehalten wird, bis diese durch einen anderen Wert geändert wird. Um den CSS - Code vielleicht auch später noch verstehen zu können, wiederhole ich deshalb immer alle Parameter in jedem Schritt. Das sind zwar ein paar Byte mehr, diese sorgen aber eventuell für späteren Durchblick.

Im zweiten Teil wird die Animation dem Selektor des zu animierenden Elements zugewiesen. In meinem Fall ist das einfach die Überschrift 1. - Ordnung, also H1. Natürlich können Animationen auch Klassen z.B. ".animation-1" oder IDs z.B. "#animation-1" oder wie auch immer Sie diese bezeichnen möchten, zugewiesen werden. Hierzu muss ich anmerken, dass das Stylesheet für die Gestaltung der Überschrift nicht aus der globalen CSS-Datei, sondern aus einer seitenspezifischen geladen wird. Sonst würden alle H1 – Überschriften mit der gleichen Animation versehen werden.

Weitere und genauere Informationen finden Sie beim W3C oder im MDN. Links dazu finden Sie im Kasten "Links zur Seite" auf der linken Seitenseite.


Die Keyframes-Regel

In der Keyframes-Regel werden die einzelnen Schritte der Animation festgelegt. Die Schritte stellen jeweils den Übergang zwischen verschiedenen Zuständen dar.

In meiner Animation beziehen sich die Übergänge ausschließlich auf die Position der sich überlagernden Hintergrundbilder. Die Bilder sollten abwechselnd von rechts und links einschweben und sich dann überdecken. Zwischen den Übergängen sollte eine Weile nichts passieren, damit man etwas Zeit zum betrachten der Bilder hat. Das Listing der Keyframes – Regel sieht dafür in der ungekürzten Fassung so aus:


@keyframes slider {
0%   {background-position: -813px, 813px, -813px, 813px, center;}
8%   {background-position: -813px, 813px, -813px, 813px, center;}
16%  {background-position: -813px, 813px, -813px, center, center;}
33%  {background-position: -813px, 813px, -813px, center, center;}
41%  {background-position: -813px, 813px, center, center, center;}
58%  {background-position: -813px, 813px, center, center, center;}
66%  {background-position: -813px, center, center, center, center;}
83%  {background-position: -813px, center, center, center, center;}
92%  {background-position: center, center, center, center, center;}
100% {background-position: center, center, center, center, center;}
}
Das CSS-Listing für die Animation der Hintergrundbilder mit den einzelnen Phasen der Slideshow.

Hier habe ich den Animationsablauf aus dem Codebeispiel als Grafik dargestellt. Die kleinen Tortenstücke entsprechende dem animierten Übergang, die großen orangefarbenen Stücke den Zeiten, in denen keine Animation stattfindet und die Bilder statisch angezeigt werden.

Grafik des Animationsablaufs
In der Grafik ist der Animationsablauf dargestellt. Die kleinen Stücke stellen jeweils die Dauer der Animation dar. Das heißt, den Übergang von einem Zustand in einen anderen. Die großen Stücke sind die Zustände, in denen die Bilder statisch angezeigt werden. Das erste Bild wird einmal am Anfang und einmal am Ende, jeweils zur Hälfte der Anzeigedauer der anderen Bilder angezeigt, um einen Endloseffekt zu erzielen.

Da CSS-Dateien ständig wachsende Monster sind und mitunter jedes Byte zählt, sollte man die Phasen mit gleichen Eigenschaften zusammenfassen. Dies kann wie bei normalen CSS-Eigenschaften, die auf mehrere Elemente angewendet werden sollen, durch eine Trennung mit Kommas erfolgen.
Hier das Beispiel dazu:


@keyframes slider {
 0%,  8%  {background-position: -813px, 813px, -813px, 813px, center;}
16%, 33%  {background-position: -813px, 813px, -813px, center, center;}
41%, 58%  {background-position: -813px, 813px, center, center, center;}
66%, 83%  {background-position: -813px, center, center, center, center;}
92%, 100% {background-position: center, center, center, center, center;}
}
Hier die zusammengekürzte Fassung mit der gleichen Funktion des oberen Listings.
Erläuterung der Keyframes-Regel
@keyframes slider {...
@keyframes besagt, dass es sich um eine Keyframes-Animation handeln soll. "slider" ist der Name der Animation. Dieser darf nur einmal vorkommen und kann nach den üblichen Konventionen für CSS-Bezeichnungen frei gewählt werden.
...{background-position: -813px, 813px, -813px, 813px, center;}
"background-position:" legt die Positionierung des Hintergrunds fest. Ich habe nur einen Wert angegeben, dieser bezieht sich dann automatisch auf die horizontale Position. Natürlich kann auch die X- und Y-Ausrichtung angegeben werden. Als Werte sind Prozentangaben, Schlüsselworte wie z.B. "top" und "center" oder Pixelangaben möglich. Je Bild muss die Angabe jedoch einheitlich erfolgen.
"-813px, 813px, -813px, 813px, center;" - Für die Animation mit 4 Bildern benötige ich um einen Endlos-Effekt zu erzielen tatsächlich 5 Bilder bzw. 5 Übergänge. Die Positionen sind jeweils für die einzelnen Bilder angegeben. Das Bild, das zuerst angezeigt werden soll, ist in der Reihenfolge das Letzte und umgekehrt. Irgendwie total logisch oder? Das Objekt, in dem die Animation ablaufen soll, ist maximal 812 Pixel breit ( siehe weiter unten). Die Bilder sind entweder links oder rechts außerhalb des Objekts, mit einem Pixel Sicherheitszugabe, geparkt und werden über die Animation in die Mitte des Objekts transportiert.
 
Beispiel für die Anordnung und Reihenfolge der Hintergrundbilder der Animation.
  • Das erste Bild ist bereits in der Mitte positioniert,
  • das Zweite rechts außerhalb,
  • das Dritte links außerhalb,
  • das vierte Bild wieder rechts außerhalb
  • und das fünfte Bild, dass gleich dem ersten ist, wieder auf der linken Seite.

Natürlich können Sie die Seiten wählen, wie Sie möchten. Sie können die Dias auch wieder aus der animierten Box heraus und oder das nächste Bild nachschieben. Ganz wie bei einer echten Diashow.

In der nächsten Phase (also von 8 bis 16%) der Animation, wird das zweite Bild in die Mitte des Objekts befördert und immer so weiter.

Um einen Stopp der Bilder zur Betrachtung zu erreichen, habe ich die Positionseigenschaften wiederholt (z.B.: 16%, 33%). Bei identischen Anweisungen zwischen zwei Animationsschritten erfolgt keine Veränderung der Positionen der Hintergrundbilder.


Selektor mit Zuweisung der Animation


h1 {
max-width: 812px;
height: 480px;
background-image: url(image_1.jpg), url(image_4.jpg),
url(image_3.jpg), url(image_2.jpg), url(image_1.jpg);
background-repeat: no-repeat;
animation-name: slider;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Hier die CSS-Eigenschaften des Elements, dem die Animation zugewiesen werden soll. Als Beispiel die H1-Überschrift.
Erläuterung zu den Eigenschaften der Animation:
max-width: 812px;
Gibt im Beispiel die maximale Breite des animierten Objekts an. Ist der Viewport, also die Displayauflösung, kleiner, wird das Objekt automatisch verkleinert.
height: 480px;
Legt die Höhe der um die Überschrift erzeugten Box fest. Die Höhe ist hier nicht Responsiv. Das heißt es erfolgt keine automatische Anpassung der Höhe bei kleineren Displays. Was aber nicht weiter schlimm ist. Eine automatische Höhenanpassung könnte man z.B. mit Viewport Units z.B. "height:40vw; " erreichen. Dies muss dann aber zum Gesamtlayout passen.
background-image: url(image_1.jpg), url(image_4.jpg), url(image_3.jpg), url(image_2.jpg), url(image_1.jpg);
Hier werden die 4 Hintergrundbilder aufgezählt. Das oberste Bild wird zuletzt genannt. Das erste Bild wird, um einen Endloseffekt zu erzielen, am Schluss der Sequenz noch einmal verwendet.
background-repeat: no-repeat;
Der ganze Zauber funktioniert nur, wenn der Hintergrund nicht gekachelt, also wiederholt wird.
animation-name: slider;
Hier wird der Name der zuzuweisen Animation aus der @keyframes - Regel angegeben.
animation-duration: 30s;
Gibt die Dauer der gesamten Animation in Sekunden an. Die zuvor angegeben Prozentwerte sind also Bruchteile dieser 30 Sekunden.
animation-iteration-count: infinite;
Hier wird die Anzahl der Wiederholungen festgelegt. In meinem Fall, als Endlosschleife. Alle Eigenschaften finden Sie unter anderem im Mozilla Developer Network.
animation-timing-function: linear;
Die Timing-Funktion legt den zeitlichen Verlauf für die gesamte Animation fest. "Linear" bewirkt einen gleichförmigen Verlauf. Der Standartwert ist "ease". Dabei startet die Animation langsam und wird zum Ende hin schneller. Eine Übersicht aller Werte finden Sie z.B. bei Self-HTML.
Kurzschreibweise für "Animation"
animation: slider 30s infinite linear;
Für "Animation" ist eine zusammenfassende Kurzschreibweise der Eigenschaften möglich. Diese werden einfach hintereinander azfgezählt.

Download der Beispieldateien

Hier können Sie eine Zip-Datei mit der Beispielanimation herunterladen. Das Archiv enthält 2 CSS-Dateien. Die Datei "style.css" dient nur zur Gestaltung der Beispielseite. In der Datei "slide.css" ist nur die Animation enthalten. Ich habe die Stylesheets für einen besseren Durchblick getrennt. Mit den Dateien aus dem Download dürfen Sie tun und lassen, was Sie möchten. Dies trifft nicht für die auf dieser Seite verwendeten Bilder und den Text zu.

Download
Download Zip-Archiv, Größe 27 KB


Browserunterstützung, Performance

Browserunterstützung

Im Moment (Feb. 2016) befindet sich die Sache nach wie vor im Entwurfsstadium. Es ist möglich, dass das W3C noch Änderungen vornimmt oder die Keyframeanimation wieder aus CSS3 gestrichen wird. Ich stecke aber nicht so tief in der Materie, um hierzu verlässlichen Aussagen zu geben.

Die Frage ob Keyframeanimationen zurzeit von allen aktuellen Browser unterstützt werden, kann ich leider auch nicht umfassend beantworten. Im Mozillabrowser und dessen Mobilversion gibt es keine Probleme. Im Internetexplorer sollten die Animationen ab Version 10 funktionieren. In Webkit-Browsern sind noch Präfixangaben erforderlich.

Um die Frage nach der Browserunterstützung zu beantworten, ist die Seite " Can I use" eine der besten Quellen.

Performance
Performance von Keyframeanimationen CPU-Auslastung
CPU-Auslastung dieser Seite mit und ohne Animation.

Keyframeanimationen zehren an der CPU-Auslastung, auch wenn ich schon anderes gelesen habe. In der Grafik sehen Sie die von der Animation dieser Seite verursachten Schwankungen der CPU-Auslastung. Nach dem neu laden der Seite ohne Animation fällt die Auslastung auf dem System um ca. 40%. Ich möchte damit sagen, dass man es vielleicht, wie mit allem im Leben, nicht übertreiben sollte.

Autor: , 14.02.2016

Feedback, Kommentare

Wenn Sie Fragen haben oder einen Kommentar los werden möchten, schreiben Sie mir bitte eine E-Mail oder nutzen Sie das Kontaktformular.

Wenn mir das, was Sie geschrieben haben gefällt, werde ich es hier einfügen. E-Mail-Adressen werden nicht veröffentlicht.

Name:  Datum: 

 

Antwort:  

Datenschutzerklärung.