Rotate Transition & Agile Design Image Gallery

Questo slider è realizzato esclusivamente in CSS e si carica quindi molto velocemente ed è completamente reattivo. Permette all'utente di operare con gesti touch screen (tocco e swipe) per navigare tra le immagini. Questo lo rende ideale per i siti ottimizzati per dispositivi mobili. L'aspetto complessivo è fresco e ordinato, ma ci sono anche alcuni punti più caratteristici. Lo schema dei colori è basato sul bianco e l'arancio.

Questa dimostrazione è priva di bordi e ha un aspetto piuttosto quadrato. Questa forma dà alla presentazione grande flessibilità, rendendola adatta a diversi tipi di fotografie.

Quando si punta il mouse sull'immagine, appaiono ai lati due frecce di navigazione, più un'icona play/pause al centro. Le frecce di navigazione sono punte di frecce bianche su di un cerchio arancio. L'icona play/pause ha lo stesso schema di colore. Queste icone ruotano in posizione quando appaiono, mentre quando l'utente allontana il puntatore dallo slider, esse scompaiono con effetto dissolvenza.

Se l'utente punta il mouse su uno dei tasti, intorno a questo apparirà un ulteriore bordo circolare, creando un disegno a cerchi concentrici. Allo stesso tempo le frecce oscillano avanti e indietro, invitando l'utente a cliccarvi sopra. Cliccando su una delle frecce si scorreranno le immagini in ordine.

Cliccando sul pulsante 'pausa' la presentazione si arresterà e l'icona si trasformerà nel simbolo 'play'. Cliccando sul simbolo, la presentazione si riavvierà.

La didascalia si trova all'angolo in basso a sinistra e utilizza un carattere sans-serif chiamato 'Lato'. Il testo è bianco su sfondo arancione. La didascalia è composta di titolo e sottotitolo, ciascuno contenuto in un rettangolino arancione con angoli arrotondati. Le didascalie compaiono ingrandendosi velocemente una dopo l'altra, creando un senso di organicità.

In basso si trova una fila di cerchietti arancioni, ognuno associato a una specifica immagine della presentazione. Il cerchio associato all'immagine visualizzata al momento presenta un bordo aggiuntivo, a creare un effetto a cerchi concentrici. Il secondo cerchio è leggermente decentrato, un simpatico tocco di design che contribuisce a dare allo slider un carattere particolarmente organico.

Quando l'utente punta il mouse su uno di questi cerchietti, l'anteprima dell'immagine a esso associata comparirà ingrandendosi velocemente, contenuta in una cornice arancione. Queste anteprime permettono all'utente di scorrere velocemente le immagini e selezionarne una da caricare direttamente.

L'effetto di transizione predefinito è il 'rotate', nel quale l'immagine ruota e scompare in dissolvenza mentre quella successiva appare ruotando nella direzione opposta. Un effetto moderno e ordinato, ma anche molto dinamico.

Il design è complessivamente moderno e simpatico, e può funzionare bene per diversi tipi di siti web. La progettazione in CSS lo rende perfetto per siti ottimizzati per dispositivi mobili, quindi è ottimo per le compagnie che offrono servizi e informazioni per utenti in movimento, come siti per trasporti pubblici, siti per compere 'last minute' e siti per il turismo.