Rotate Animation & Agile Skin Image Gallery

Deze pure CSS slider laadt snel en reageert op elke actie. De gebruiker kan touch-en-swipe bewegingen maken om te navigeren door de slideshow, waardoor het ideaal is voor ontwerpers van applicaties die in de eerste plaats voor mobiele toestellen bedoeld zijn. Het algehele uiterlijk is opgeruimd en fris, maar heeft een paar interessante eigenaardigheden. De slider gebruikt een wit-oranje kleurenschema.

De demonstratie heeft geen rand en de vorm is tamelijk vierkant. De vierkante vorm betekent dat de slideshow zeer flexibel is en gebruikt kan worden met een grote verscheidenheid aan foto’s.

Als met de muis over de afbeelding gegaan wordt, verschijnt aan beide zijden een navigatiepijl en een pauze/play icoon in het midden. De navigatiepijlen zijn witte pijlpunten in een oranje cirkel en het play/pauze icoon is ook wit in een oranje cirkel. Deze iconen ‘draaien’ naar hun positie en als de muis niet meer over de slider bewogen wordt, draaien ze weg en vervagen ze.

Als de gebruiker de muis over de iconen beweegt, krijgen deze een tweede oranje rand om de oranje cirkel, waardoor een ‘dubbele cirkel’ effect gecreëerd wordt. De navigatiepijlen schuiven van voor naar achteren, waardoor de gebruiker aangezet wordt erop te klikken. Klikken op een van de pijlen laat je voor- of achteruit door de afbeeldingen bladeren.

Het klikken op de ‘pauze’ knop zorgt ervoor dat de slider stopt met het laten verschijnen van de volgende afbeelding en verandert het icoon in een ‘play’ symbool. Het klikken op het play symbool start de show weer.

Het onderschrift bevindt zich in de linkerhoek aan de onderkant en heeft een sans-serif lettertype genaamd ‘Lato’. De tekst is wit en heeft een oranje achtergrond. Er is zowel een titel als een ondertitel en beiden hebben aparte, rechthoekige achtergronden met ronde hoeken die samen een nieuwe vorm creëren. Deze onderschriften komen langzaam na elkaar in beeld, wat ze tamelijk natuurlijk laat aanvoelen.

Aan de onderkant van de slide staat een aantal oranje cirkels die de afbeeldingen van de slideshow representeren. De cirkel die de huidige afbeelding representeert, heeft een oranje rand die zorgt voor een ‘dubbele cirkel’ effect. Een aardig detail is dat de tweede cirkel een klein beetje scheef is. Het is een subtiel kenmerk van het ontwerp, maar het helpt het ontwerp een natuurlijk gevoel te geven.

Als de gebruiker de muis over een cirkel beweegt, verschijnt een voorbeeldafbeelding in een oranje kader langzaam in beeld. Door deze voorbeeldafbeeldingen kan de gebruiker andere toekomstige slides zien en hier een van selecteren om te laden.

Het standaard overgangseffect is ‘rotate’, wat een nieuwe afbeelding in beeld draait en een oude eruit. Het is opgeruimd en voelt modern aan, maar vertoont veel beweging.

Het ontwerp is modern en leuk, en zou goed werken voor een grote verscheidenheid aan websites. Het overal op reagerende, pure CSS ontwerp, maakt het perfect voor sites die geoptimaliseerd zijn voor gebruik op mobieltjes en is dus geweldig voor bedrijven die informatie moeten geven en hun diensten moeten verkopen aan mensen die onderweg zijn – zoals websites van openbaar vervoer, ‘last minute’ webwinkels en toerisme websites.