- Home. Please Welcome -

Der Bildwechsler

Bildwechsler zeigt auf jeder Seite verschiedene Bilder

Es werden hier im Beispiel4 Bilder getauscht. Und das auf jeder Seite. Um das Prinzip deutlich zu machen, zeigen wir Ihnen insbesondere auf den Seiten index.html (Home), index1.html (Primus), index2.html (Secundus) und index3.html (Tertius), wie der komplette Bildersatz gewechselt wird. Ach ja, dieser Bildwechsler ist genauso wie die anderen Animationen in diesem Template nur per CSS erstellt und kommt somit ganz ohne Javascript bzw. Jquery aus. Hier auf der Seite index4.html (Quartus) erfahren Sie mehr zu den Animationen und wie Sie allgemein auch die Animationen löschen können.

Der Bild-Anzahl-Anzeiger

X von X oder 1 von 4

Bei einem Bildwechsler, wie oben zu sehen, auch genannt Slideshow, gibt es oft einen Anzeiger für die Bildanzahl der zu wechselnden Bilder. Man erkennt dann z.B. : Jetzt gerade ist Bild 2 von insgesamt 4 Bilder zu sehen . Setzen wir hier mal voraus es handelt sich nur um insgesamt 4 zu wechselnde Bilder. Zurück zum Thema, diese Bildanzeiger werden häufig als kleine Kreise dargestellt, wobei der Kreis für das aktuelle Bild dann farblich anders formatiert wird.

Wir haben diesen Bildanzeiger hier mal ganz anders gestaltet. Es gibt ein Batterie-Symbol, welches Sie ganz oben rechts sehen und das sich mit jedem angezeigten Bild der Slideshow weiter füllt. Sozusagen bis die Batterie voll geladen ist.

Die Technik

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

So testen Sie

Diese Responsive-Vorlage verwendet keinerlei Javascript. Weder für die Navigation noch für die Animationen. Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.

Impressionen

Einige Foto Eindrücke

Bei den Fotos auf den Seiten index2.html (Secundus), index3.html (Tertius), index5.html (Quintus) und index6.html (Sextus) zeigen wir Ihnen Beispiele für die Anordnung von 2 Fotos im Block, 4 Fotos im Block, 3 Fotos im Block und 1 Foto mit nebenstehendem Text.

Zoom-In-Animation

Bei Mausberührung bzw. Touch auf den Fotos der vorstehend genannten Links gibt es eine Animation wie folgt: Es erfolgt eine Vergrößerung des Fotos. Da wir aber diese Animation innerhalb einer Box ablaufen lassen, wird daraus ein Zoom-In-Effekt.