KenBurns Effect & Sheer Template Html Slideshow
Diese Slideshow hat einen weichen, freundlichen, schon fast schon romantischen Stil. Sie nutzt Lila und Weiß und die Halb-Transparenz verstärkt das weiche, träumerische Aussehen. Dieses Slider Design würde großartig zu Dating-Webseiten, Reisebüros, welche auf romantische Reisen spezialisiert sind, oder Chick-Lit-Autoren passen.
Dieses Beispiel nutzt die Kenburns-Animation um von einem Bild zum nächsten zu wechseln. Es ist ein sehr sanfter Übergang, der Bewegung und Verblassen vereint, was sehr gut mit dem träumerischen Ambiente zusammenspielt, während er gleichzeitig Bewegung ins Spiel bringt.
Der Bildtext in der unteren linken Ecke ist pink. Der Haupttitel ist auf einem leicht transparenten weißen Rechteck mit abgerundeten Ecken und der Untertitel ist ebenfalls auf einem solchen mit einem undurchlässigen weißen Rand. Der durchgehende Gebrauch von Transparenz in diesem Design lässt die Farben der Fotografien auf eine weiche diffuse Art durchscheinen.
Die verwendete Schriftart ist Raleway, ein eleganter Sans-Serif Schrifttyp, der gut mit dem Farbschema zusammenspielt.
Die Bildtexte werden so eingeblendet, dass es aussieht, als würden sie aus einem einzigen Punkt heraus anschwellen. Der Titel erscheint zuerst, gefolgt vom Untertitel.
Wenn man mit der Maus darüberfährt, erscheinen zwei Navigationspfeile. Diese schrumpfen ins Blickfeld. Sie haben ein recht einzigartiges Design, ein transparenter Pfeil mit einem halbtransparenten, weißen Rand, der einen transparenten Kreis mit halbtransparentem, weißem Rand zum Hintergrund hat. Bewegt man die Maus über den Pfeil wird der Kreis violett und der Pfeil deckend.
Mit einem Klick auf die Navigationspfeile kann man durch alle Bilder in der Slideshow blättern.
Bewegt man die Maus aus dem Slider heraus, so dehnen sich die Pfeile aus werden ausgeblendet. Auch dieser Übergang ist liebevoll und sanft und unterstreicht das weiche und romantische Gefühl, weil es an Regentropfen, die ins Wasser fallen, erinnert.
Am unteren Rand befinden sich halbtransparente, weiße Kreise. Sie repräsentieren die verschiedenen Bilder in der Slideshow und der Nutzer kann sie anklicken, um direkt zu einem bestimmten Bild zu gelangen, ohne darauf warten zu müssen, dass die ganze Sequenz durchgelaufen ist.
Der Kreis, welcher das derzeit angezeigte Bild in der Slideshow repräsentiert wird transparent und erhält einen weißen Rand.
Dieses Karussell basiert ausschließlich auf CSS, entsprechend kommen alle Übergangseffekte, Icons und Navigationselemente ohne JQuery oder Javascript aus. Weiterhin ist es vollständig responsiv und das User Interface vereinfacht sich auf einem kleinen Bildschirm wie bspw. dem eines Smartphones – So erscheinen beispielsweise die Untertitel nicht und die Navigationspfeile sind größer und einfacher zu bedienen. Auf einem mittelgroßen Bildschirm wird der Slider in voller Breite angezeigt.
Alles in allem ist dies ein liebliches Sliderdesign, welches leicht, responsiv und perfekt für Webseiten mit einem femininen Look und Feel geeignet.