Book Effect & Book Style Css3 image slider

Deze slider bootst het uiterlijk en gevoel van een oud boek na. Skeuomorfisme wordt niet vaak gezien in het ontwerp van sliders, waardoor deze tamelijk anders en in het oog springend is.

De slider is ook anders omdat hij twee afbeeldingen in een keer laat zien op opeenvolgende ‘pagina’s’. Dit betekent dat de slider buitengewoon goed werkt voor vierkante afbeeldingen, in tegenstelling tot de meeste sliders die zijn ontworpen om te werken met horizontaal georiënteerde afbeeldingen. De twee slides worden beschreven in een enkel onderschrift, dus je moet er zeker van zijn dat de afbeeldingen als paar door kunnen gaan. Het is fantastisch om een enkel product op twee verschillende manieren te laten zien, bijvoorbeeld een groothoek weergave die de hele afbeelding laat zien en dan een close-up van een detail.

De slides verschijnen in een ‘omslag en pagina’s’ kader dat er uit ziet als een antiek in leer gebonden boek. Als met de muis over de slider gegaan wordt, komen twee erg sierlijke, gouden navigatiepijlen tevoorschijn, een aan elke zijde. Deze pijlen laten je door de pagina’s bladeren of terug gaan naar een vorige pagina.

Er staat een onderschrift in de hoek linksonder. Deze komt rechtstreeks uit de rand van de ‘pagina’ tevoorschijn en de achtergrond heeft dezelfde kleur. Dit houdt in dat het onderschrift aanvoelt als een deel van het boek en het realistische effect versterkt.

Het gebruikte lettertype is Lobster. Dit is een fantastisch lettertype dat gebruik maakt van meerdere versies van letters en ligaturen om een mix van handgeschreven effecten te creëren dat extreem natuurlijk en realistisch is. Een subtiel ‘reliëf’ effect maakt het schrift af, het geeft het een zowel handgeschreven als geraffineerde indruk, zoals de letters met reliëf op een met de hand gebonden dagboek.

Aan de rechteronderkant bevindt zich een reeks cirkels, elk hiervan representeert een slide. De zelfde zorg en aandacht is besteed aan deze cirkels en elk voelt aan als een antieke gouden knop, met een punt in het midden die ‘als een zegel uitgedrukt’ is, met dank aan de enigszins onregelmatige randen. Als de huidige slide gemarkeerd is, krimpt het knoopsgat een beetje ineen.

Als met de muis over de knoppen gegaan wordt, komt een voorbeeld van elk paar slides tevoorschijn. Deze zitten in een gouden frame en hebben een lichte schaduw achter zich. Je kunt de knoppen gebruiken om te springen naar andere slides.

De combinatie van realistisch leer, reliëf en schaduw maken deze slider realistisch en tastbaar. Hij zou goed tot zijn recht komen op touchscreens vanwege de manier waarop het je uitnodigt de pagina’s aan te raken.

Het standaard veranderingseffect is de perfecte omdat deze het omslaan van pagina’s van een boek nabootst. Hoewel je een ander transitie-effect kunt kiezen, past het ‘boek’ buitengewoon goed bij dit sliderontwerp.

De slider is perfect voor iedereen die een dure, ouderwetse sfeer wil nabootsen. Antiekdealers, auteurs van fantasy en iedereen die handgemaakte producten verkoopt zou baat hebben bij het gebruik van deze slider.