Rotate Effect & Agile Layout Image Gallery
Dieser reine CSS-Slider lädt schnell und ist komplett responsiv. Er gestattet dem Nutzer Wischbewegungen, um durch den Slider zu navigieren und macht ihn damit zur idealen Wahl für Designer, die für mobile Endgeräte arbeiten. Das Gesamtbild ist klar und frisch, aber mit ein paar interessanten Eigenschaften. Der Slider benutzt ein orange-weißes Farbschema.
Die hier gezeigte Demo hat keinen Rahmen und ist recht quadratisch in ihrer Form. Durch die quadratische Formgebung ist diese Slideshow sehr flexibel und kann mit einer Vielzahl an Fotos genutzt werden.
Wenn man mit der Maus über den Slider fährt, dann erscheinen zwei Navigationspfeile an den Seiten und ein Start- / Pause-Knopf in der Mitte. Die Navigationspfeile sind weiß auf einem orangenen Kreis, sowie der Start- / Pause-Knopf auch. Diese Buttons „drehen“ sich in Position und verschwinden mit einer Drehung, wenn man mit der Maus aus dem Slider herausgeht.
Wenn der Nutzer über die Buttons fährt, erhalten diese zweiten orangenen Rahmen um den orangenen Kreis und erschaffen somit einen Doppelkreis-Effekt. Die Navigationspfeile bewegen sich vor und zurück, was den Nutzer dazu einlädt, auf sie zu klicken. Der Klick auf einen der Pfeile erlaubt es, durch die Bilder zu navigieren.
Mit einem Klick auf den Pause-Button hält der Slider an und ändert den Pause-Button in einen Start-Button. Ein weiterer Klick auf den Start-Button genügt, um die Slideshow erneut zu starten.
Die Bildunterschrift befindet sich in der linken, unteren Ecke und nutzt eine serifenlose Schrift namens „Lato“. Der Text ist weiß mit orangenem Hintergrund. Es gibt sowohl einen Titel als auch einen Untertitel und beide haben eigenständige, rechteckige Hintergründe mit abgrundeten Ecken, die sich zu einer neuen Form zusammensetzen. Die Unterschriften zoomen langsam ins Sichtfeld, ein nach der andere, und geben somit dem Slider ein organisches Gefühl.
Unterhalb des Sliders befindet sich eine Reihe an orangenen Kreisen, die Bilder aus der Slideshow repräsentieren. Der Kreis, der das aktuelle Bild anzeigt, erhält einen orangenen Rand, welcher einen Doppelkreis-Effekt erzeugt. Es ist eine nette Sache, dass der zweite Kreis leicht schiefgestellt ist – Ein subtiles Designmerkmal, aber es trägt dazu bei, dem Design ein organisches Gefühl zu geben.
Wenn der Nutzer mit der Maus über einen der Kreise fährt, wird ein Vorschaubild mit einem orangenen Rahmen eingeblendet. Durch diese Vorschaubilder kann der Nutzer sehen, welche Bilder als nächstens kommen und auch ein Bild auswählen, was er gerne betrachten möchte.
Der standardmäßige Übergangseffekt ist „Rotate“, welcher das neues Bild „hereindreht“ und das alte Bild „herausdreht“. Es ist ein klarer und moderner Effekt, aber mit einer Menge Bewegung.
Das Design ist modern und spaßig und kann für eine breite Palette an Webseiten genutzt werden. Das responsive, reine CSS-Design macht diesen Slider perfekt für Seiten, die für mobile Geräte optimiert wurden, ist also ideal für Unternehmen, die Ihre Dienste an Kunden unterwegs vermitteln oder verkaufen möchten, wie beispielsweise Webseiten von öffentlichen Transportmitteln, ‚Last Minute‘-Shoppingseiten oder Tourismus-Webseiten.