Rotate Animation & Agile Theme Image Gallery

Denne rene CSS slider loader hurtigt og er fuldstændigt responsiv. Den lader brugeren bruge rør-og-stryg bevægelser til at navigere gennem slideren, hvilket gør den ideel til mobil-først designere. Det overordnede udseende er rent og friskt, men med nogle få interessante særegenheder. Slideren bruger en hvid og orange farvesammensætning.

Demoen har ingen kant og er ret kvadratisk i faconen. Den kvadratiske facon betyder, at slideshow’et er meget fleksibelt og kan bruges med et bredt udvalg af fotografier.

Hvis du dvæler på billedet, viser der sig to navigationspile, hver på sin side, og et pause/afspil ikon i midten. Navigationspilene er hvide pilespidser på en orange cirkel, og afspil/pause ikonet er også hvidt på en orange cirkel. Disse ikoner ‘roterer’ sig på plads, og hvis du holder op med at dvæle på slider’en roterer de og fader gradvist ud.

Hvis brugeren dvæler over ikonerne, får de endnu en orange rand uden om den orange cirkel, hvilket skaber en ‘dobbelt-cirkel’ virkning. Navigationspilene rokker frem og tilbage som opfordring på, at brugeren skal klikke på dem. Hvis du klikker på den ene eller den anden af pilene, kan du gå fremad eller tilbage gennem billederne.

Hvis du klikker på ‘pause’ knappen, vil det forhindre slider’en i at vise det næste billede og forvandle ikonet til et ‘afspil’ symbol. Hvis du klikker på afspil symbolet, går show’et i gang igen.

Billedteksten befinder sig i nederste venstre hjørne og bruger en sans-serif font, der hedder ‘Lato’. Teksten er hvid, og den står mod en orange baggrund. Der er både en titel og en undertitel, og de har begge særskilte, rektangulære baggrunde med afrundede hjørner, der sammen danner en ny form. Disse billedtekster zoom’er sig langsomt ind i synsfeltet, den ene efter den anden, hvilket får dem til at virke meget organiske.

Nederst på slider’en er der et sæt orange cirkler, som repræsenterer slideshow billeder. Den cirkel, der repræsenterer det nuværende billede, får en orange rand, hvilket danner en ‘dobbelt cirkel’ effekt. En finesse er, at den cirkel nummer to sidder en anelse skævt. Det er en hårfin design feature, men det er med til at få designet til at virke ret organisk.

Når brugeren dvæler på en cirkel, kommer et forhåndsvisningsbillede i en orange ramme langsomt til syne. Disse forhåndsvisningsbilleder lader brugeren se de andre billeder, der er på vej, eller vælge et at loade.

Som standard er overgangseffekten ‘rotate’, hvilket roterer et nyt billede ind og roterer et ældre billede ud. Det føles rent og moderne, men med masser af bevægelse.

Designet er moderne og sjovt og ville virke fint for et bredt udvalg af websteder. Det responsive, rene CSS design gør det ideelt for websteder, der er optimiseret for mobiltelefoner, så det er alletiders for firmaer, der er nødt til at give information og sælge deres tjenester til folk, som er på farten — såsom offentlige transport websteder, ‘sidste øjeblik’ shopping sider og turisme websteder.