Animazioni Css3: Rotating Image Gallery Plugin

Oggi analizziamo alcune animazioni CSS3 per realizzare una fantastica galleria di immagini rotanti con lightbox integrata utilizzabile per i nostri progetti web.

Per maggiori informazioni sulla lightbox integrata vi invito a leggere questo mio precedente articolo dove spiegavo passo passo come realizzarla. L’effetto di questa nuova galleria è molto gradevole e risulta particolarmente indicato per hotel, attività commerciali o per chiunque voglia implementare sul proprio sito qualcosa di davvero innovativo e diverso dal solito.

PROVA LA DEMO >>

01. Struttura del progetto

A) La galleria viene adattata a tutto schermo con sfondo scuro per far risaltare i colori delle thumb

B) Alle thumb viene dato un effetto di scaling e rotating simultaneo facendo “staccare” la thumb dalla griglia.

C) Viene implementata la gestione lightbox per ingrandire le thumb.

Vediamo ora come realizzare il punto B ovvero il cuore della nostra galleria con pochissime righe di codice grazie alla potenza delle nuovissime animazioni css3.

02. Realizzazione dell’animazione css3

ecco la struttura html di partenza:

<div id="GalleryBox">

 <a href="galleria/1.jpg" class="lightbox"><img src="galleria/thumbs/tn_1.jpg" class="hover" /></a>
 <a href="galleria/12.jpg" class="lightbox"><img src="galleria/thumbs/tn_12.jpg" class="hover" /></a>
 <a href="galleria/3.jpg" class="lightbox"><img src="galleria/thumbs/tn_3.jpg" class="hover" /></a>

</div>

come vedete l’utilizzo e l’implementazione della galleria sono molto intuitivi. Altrettanto semplice è l’animazione CSS3 che svolge il ruolo fondamentale in questo progetto:

#GalleryBox img {

/* creo la griglia disponendo le thumb */

	float:left;

	/* tempo di "ritorno in posizione" dell'elemento (thumb) una volta che il mouse esce dalla stessa */

	-webkit-transition: all 2s ease-in-out;

	-moz-transition: all 2s ease-in-out;

	-o-transition: all 2s ease-in-out;

	transition: all 2s ease-in-out;

}

#GalleryBox img:hover {

	/* Ruoto e scalo la thumb */

	-webkit-transform:rotate(720deg) scale(2,2);

	-moz-transform:rotate(720deg) scale(2,2);

	-o-transform:rotate(720deg) scale(2,2);	

}

In pratica sull’iimmagine diamo una sorta di “tempo di ritorno” per essere più chiari, che si manifesta quando il visitatore “esce” dell’hover della thumb. In questo modo la miniatura dell’immagine ritorna al suo posto a velocità di 2sec con modalità ease-out.

Con img:hover invece comunichiamo che quando l’utente va sopra una thumb deve animarsi ruotando di 720 gradi (2 giri completi) e contemporaneamente si deve ingrandire con proporzione 2,2. Ovviamente possiamo adattare questi valori come meglio ci aggrada a seconda delle nostre esigenze.

Come vedete grazie ai css3 possiamo animare facilmente elementi con poche righe di codice. Effetto assicurato!

03. Compatibilità

Il plugin e il codice relativo è compatibile con tutti i nuovi browser next-gen (Firefox, Chrome, Safari, Opera). Per un uso ancora più “fluido” vi consiglio Chrome o Safari.

La funzionalità lightbox funzionerà anche su browser più datati come Internet explorer 8 rendendo così compatibile e usabile la galleria con tutti i browser. Per implementare la funzionalità di rotating e scaling (non native in ie8 e inferiori)  potete usare il condizionale jquery:

 if ($.browser.msie) {

	CODICE SCRIPT JQUERY PER LA GESTIONE DELLE ROTAZIONI

 }

e costruire al suo interno uno script jQuery abbastanza facile da realizzare per la gestione dello scale e del rotate. A tal proposito vi segnalo questo plugin per gestire le rotazioni in modo immediato.

Se su internet explorer volete lasciare stare l’effetto rotate ma volete applicare solo un “fade” al passaggio del mouse (molto più fluido per browser datati come ie), copiate il codice di questo articolo all’interno del select qui sopra.

04. Demo e Download

DEMO | DOWNLOAD

05. Note e condizioni d’uso

• Per scopi NON commerciali: download libero  a patto di lasciare le righe di ringraziamento (sotto forma di commento) al codice.
• Per scopi commerciali: desidererei essere contattato. ( la galleria resterà FREE per sempre ma vorrei avere un feedback di chi lo utilizza per progetti commerciali).
• Non sei capace di integrare la galleria e vuoi una consulenza? Oppure vuoi semplicemente commissionarmi una galleria/script da realizzare su misura per la tua azienda, allora non esitare a contattarmi.