Responsive Webseiten-Vorlage

(Experimentell:) Der animierte Bildwechsel eignet sich sowohl für eine Diaschau mit drei oder mehr Bildern als auch für zwei Bilder in vorher/nachher-Darstellung. Zum technischen Verständnis der Funktionsweise (siehe HTML- und CSS-Quelltext) sind zumindest drei Bilder erforderlich. Die Animation erfolgt nur mit CSS-Regeln (kein jQuery, kein Javascript erforderlich). Im Gegensatz zu vielen anderen Animations-Lösungen werden hier Vordergrundbilder angezeigt. Vordergrundbilder sind suchmaschinenfreundlicher als Hintergrundbilder.

Die schon bekannte CSS-Klasse bquer600 wird auch hier genutzt, damit sich die angezeigte Bildgröße automatisch der verfügbaren Bildschirmbreite anpaßt. Die verwendeten Bilder müssen natürlich die gleichen Abmessungen aufweisen (hier 600 px * 450 px). Die Eigenschaften der Animation sind zusätzlich in der Klasse bwechsel festgelegt. Dem div-Behälter für den animierten Bildwechsel müssen also die zwei Klassen bquer600 und bwechsel zugewiesen werden.

Für die eigentliche Animation verwende ich diese Wiki.Selfhtml-Beispiel-Lösung. Deren Nachteile: sie richtet die Bilder nicht mittig aus, ist nicht responsiv und berücksichtigt auch keine weiteren Seiteninhalte unterhalb der Bilder. Die Probleme sind bekannt: Absolut positionierte Blöcke sind eigentlich nur für Elemente fester Höhe geeignet (das ist hier nicht der Fall, weil die Bilder je nach Auflösung verschieden breit und hoch sind). Und ein Element mit position: absolute innerhalb eines Elements, das mit position: relative positioniert ist, zu zentrieren, ist schon bei nur einer Auflösung tüftelig.

(Experimentell:) Ich hab's trotzdem gewagt und die Wiki.Selfhtml-Lösung responsiv erweitert: Je nach Fensterbreite sorgen 15 (!) Medienabfragen mit abweichenden CSS-Regeln dafür, (1.) die Bilder zentriert auszurichten, (2.) bei unterschiedlichen Bildgrößen / Fensterbreiten die Beschreibung innerhalb des Bildes zu positionieren und (3.) den Abstand zu den folgenden Elementen unterhalb der Animation festzulegen. Aber technisch ausgereift ist die responsive Erweiterung noch nicht, und deshalb ist der animierte Bildwechsel im Download-Paket nicht enthalten.

Wer die Eigenschaften der Animation ändern will, findet zB auf Wiki.Selfhtml eine ausführliche Beschreibung. Bei Anzeige zweier Bilder in vorher/nachher-Darstellung wäre anstatt der Endlosschleife vielleicht der Wiederholfaktor (animation-iteration-count) 1 sinnvoller, sofern die Bilder bei Aufruf der Seite sofort sichtbar sind (sonst eher nicht).