Slide Effect & Blast Style Image Slider
Der Slider ist ein reiner CSS-Slider über die volle Breite, der dramatisch und schön zugleich ist. Wischbewegungen sind aktiviert und somit ist er ideal für Tablets und Smartphones geeignet, weiterhin hat er sehr kurze Ladezeiten.
Aufgrund der vollen Breite hinterlassen die Bilder maximalen Eindruck und somit ist dieser Slider besonders für Fotografen oder Leute, die den Fokus auf Bilder lenken wollen, geeignet.
Es gibt zwei Navigationsbuttons und einen Start- / Pause-Button, die angezeigt werden, sobald der Nutzer mit den Slides interagiert oder darüberfährt. Diese nutzen starke, weiße Icons auf einem tiefblauen Hintergrund. Es scheint, als „fallen“ sie in Position indem Sie eingeblendet oder verkleinert werden. Dies ist ein dramatischer und attraktiver Effekt, der auch rückwärts gut funktioniert, wenn die Icons sich anscheinend vom Slider „erheben“. Das Ganze gibt dem Slider ein dreidimensionales Gefühl.
Eine Mausbewegung über die Buttons erzeugt einen blauen Rand, der vom zentralen Kreis aus zu strahlen scheint und dann ausblendet. Auch dieser Effekt ist stilvoll und dramatisch und lässt das Design des Sliders hervorstechen.
Die Buttons machen genau das, was Sie erwarten würden. Mit einem Klick auf die Pfeile können Sie auf die entsprechenden Slides navigieren, ein Klick auf den Start- / Pause-Button hält die Slideshow entweder an oder startet sie.
Der Nutzer kann auch über die Kreise unterhalb des Sliders navigieren. Diese Kreise sind tiefblau und jeder repräsentiert ein Bild in der Slideshow. Wenn ein neues Bild im Slider erscheint, erhält der entsprechende Kreis einen halbtransparenten, starken, weißen Rand, der Aufmerksamkeit erzeugt und dem Nutzer beim Verstehen des Sliders hilft.
Die Interaktion mit den Kreisen führt zu einem Vorschaubild, welches blau umrandet ist. Dieses Vorschaubild „fällt“ ins Bild und fliegt wieder hinaus, so wie es die anderen Buttons auch tun. Ein Klick auf einen Kreis lädt das entsprechende Bild in der Slideshow.
Jedes Bild der Slideshow „gleitet“ zum nächsten, entweder nach links oder rechts, abhängig davon, ob es ein vorheriges oder das nächste Bild ist. Wenn man man die Kreise zur Navigation in der Slideshow benutzt und dabei mehrere Bilder überspringt, oder wenn die Slideshow am „Ende“ der Bilder angekommen ist und wieder auf Anfang geht, so durchläuft diese schnell alle Bilder. Damit erhält der Slider ein organisches, „realistisches“ Gefühl, welches recht subtil ist, womit sich der Slider freundlich und organisch anfühlt.
Ein Bildtext ist unten links. Es gibt einen Titel und einen Untertitel, beide in weiß auf einem halb transparenten Rechteck. Die Bildtexte bewegen sich auf und ab wie die anderen Icons und die Vorschaubilder. Der halb transparente blaue Hintergrund lässt die Farben auf dem Foto darunter durch und gibt der Beschriftung ein etwas weicheres Gefühl.
Die Bildtexte sind in Duru Sans geschrieben, einer Sans-Serif Schriftart die humanistisches und modernes Design vereint. Das Ergebnis sieht sehr elegant aus und gibt dem Design ein anspruchsvolles Gefühl.
Da weder JQuery noch Javascript und keine Bilder verwendet wurden, läuft der Slider schnell, flüssig und funktioniert auf jeder Plattform. Er ist perfekt für Designer für mobile Geräte.