Rotate Animation & Agile Layout Image Gallery

Denne CSS-slideren laster raskt og er fullstendig responsiv. Den lar brukeren berøre og dra for å navigere gjennom bildet, noe som gjør den ideell for mobil-designere. Totalutseendet er rent og friskt, men med noen interessante detaljer. Slideren benytter en hvit eller orange fargepalett.

Demonstrasjonen har ingen bildekant og har en ganske kvadratisk form. Den kvadratiske formen betyr at lysbildefremvisningen er svært fleksibel og kan benyttes på et stort antall fotografier.

Ved å peke på bildet vises en navigasjonspil på hver side, og en pause/spill av-knapp i midten. Navigasjonspilene er hvite pilhoder i en orange sirkel. Det samme er spill av/pause-ikonet. Disse ikonene ‘spinner’ i posisjon, og hvis du ikke lenger peker på slideren, spinner de og fader bort.

Hvis brukeren peker på ikonene, får de en ny orange sirkel utenfor den eksisterende, noe som gir en ‘dobbelsirkel’-effekt. Navigasjonspilene beveger seg frem og tilbake som en oppfordring til brukeren om å klikke på dem. Å klikke på pilene lar deg bla frem og tilbake gjennom bildene.

Å klikke på ‘pause’-knappen stopper slideren fra å vise det neste bildet og endrer ikonet til et ‘spill av’-symbol. Å klikke på ‘spill av’-symbolet starter lysbildevisningen igjen

Bildetekster vises i nederste venstre hjørne og benytter en sans-serif font kalt ‘Lato’. Teksten er hvit og vises på en orange bakgrunn. Det er både titler og undertitler og begge vises på separate rektangelformede bakgrunner med runde hjørner som sammen skaper en ny form. Bildetekstene zoomes sakte til syne, den ene etter den andre, og gjør at de føles organiske.

Nederst i lysbildet er det et antall orange sirkler som representerer bildene i lysbildevisningen. Sirkelen som representerer bildet som vises i øyeblikket, får en orange kant med en ‘dobbelsirkel’-effekt. Det er et elegant poeng at den andre sirkelen vises litt ute av senter. Det er et smart designgrep og bidrar til at designet virker ganske organisk.

Når brukeren peker på en sirkel kommer et forhåndsvisningsbilde sakte til syne. Disse forhåndsvisningsbildene lar brukeren se de andre bildene og velge et av dem.

Standard overgangseffekt er ‘roter’ som spinner over i et nytt bilde og spinner ut et gammelt bilde. Det synes rent og moderne, men har mye bevegelse.

Designet er moderne og morsomt og fungerer godt på et stort antall nettsteder. Det responsive CSS-baserte designet gjør at det er perfekt for nettsteder optimalisert for mobiler, slik at det passer svært bra for bedrifter som har behov for å gi informasjon og selge tjenestene sine til folk på farten – som for eksempel trafikk-nettsteder, ‘i siste øyeblikk’ shopping-nettsteder og reiselivs-nettsteder.