Slide Effect & Blast Style Image Slider

Questo è uno slider ad ampiezza massima, progettato in CSS, molto bello e appariscente. È abilitato ai gesti per touch screen, rendendolo l'ideale per tablet e smartphone. I tempi di caricamento sono molto rapidi.

Essendo ad ampiezza massima, le immagini possono offrire il massimo impatto, rendendo lo slider un'ottima scelta per fotografi e per altri siti in cui va dato il massimo risalto alle immagini.

Ci sono due frecce di navigazione e un pulsante pause/play che appaiono quando l'utente punta il mouse sulle immagini. Le icone sono bianche in grassetto e si trovano su di un cerchio blu scuro. Appaiono con un effetto caduta, comparendo gradualmente e rimpicciolendosi fino alle dimensioni standard. Quando si allontana il puntatore del mouse, l'effetto è l'esatto contrario: le icone si gonfiano e si dissolvono velocemente. Nel complesso questo effetto dà un forte senso di tridimensionalità allo slider.

Quando si punta direttamente sulle icone, appare un bordo blu che sembra irradiarsi dal cerchio centrale per poi dissolversi. Di nuovo, un effetto elegante e drammatico che dà grande risalto a questo slider.

Le icone fanno esattamente quello che l'utente si aspetta: cliccando sulle frecce a destra e a sinistra si procede avanti o indietro con la presentazione, mentre cliccando sul tasto play/pause si arresta o riavvia la presentazione.

L'utente può anche navigare tra le immagini utilizzando i cerchietti in basso al centro. Questi cerchietti sono di colore blu scuro, e ciascuno rappresenta un'immagine della presentazione. Quando una nuova immagine compare nell'area principale, il cerchietto ad essa associato si evidenzia acquisendo un bordo bianco semitrasparente che cattura l'attenzione facendo capire all'utente qual è la funzione del cerchietto.

Interagendo con i cerchietti, comparirà un'anteprima dell'immagine relativa, contenuta in una cornice blu. Questa immagine 'cade' e 'decolla' proprio come le icone di navigazione. Cliccando su di un cerchio, l'immagine relativa si caricherà nella finestra principale della presentazione.

Ogni immagine della presentazione scivola in posizione spingendo via quella precedente, a destra o a sinistra, a seconda della direzione in cui si sta navigando. Quando si usano i cerchietti per navigare direttamente su di un'immagine specifica, si vedranno scorrere velocemente tutte le immagini intermedie, e quando la presentazione giunge alla fine, si scorreranno rapidamente tutte le immagini per tornare a quella iniziale. Questo dà alla presentazione un carattere molto fine e realistico, rendendo lo slider caldo e organico.

All'angolo in basso a sinistra si trova una didascalia, composta di titolo e sottotitolo, entrambe in testo bianco su rettangolini blu semitrasparenti. Le didascalie cadono e si alzano in posizione alla stessa maniera delle altre icone. Lo sfondo blu semitrasparente permette di lasciar passare i colori dell'immagine sottostante e dà allo stesso tempo un tono morbido alla didascalia.

Il testo è in carattere Duru Sans, un font sans-serif che mette insieme un design umanista e modernista. Il risultato è molto elegante e dona a tutto lo slider un carattere molto sofisticato.

Dato che non ci sono elementi jQuery, javascript o immagini, questo slider è veloce e funziona su qualsiasi piattaforma. È perfetto per i siti ottimizzati per dispositivi mobili.