Windy è un plugin jQuery che permette una navigazione rapida di gruppi di elementi utilizzando delle accattivanti trasformazioni e transizioni CSS 3D. L’effetto di un flusso continuo nello sfogliare gli elementi ricorda un mazzo di carte o un gruppo di fogli che volano via; ed è proprio da ciò che il plugin trae il suo nome.
Windy offre diverse opzioni personalizzabili, tra cui la definizione del range di diffusione degli elementi durante la navigazione, le velocità delle transizioni, l’aggiunta di navigazioni personalizzate, e altro ancora. Per i browser che non supportano le trasformazioni 3D o le transizioni CSS3, il plugin mostrerà gli elementi in una modalità normale e priva di effetti (l’elemento apparirà / scomparirà), senza precludere comunque la visibilità del contenuto.
Di seguito riporto un esempio di implementazione base. Per vedere tutte le opzioni disponibili per la personalizzazione consultare il sito dell’autore.
Esempio di richiamo della funzione base
1 |
$( '#wi-el' ).windy(); |
Esempio del codice HTML
1 2 3 4 5 6 7 8 9 10 11 |
<ul id="wi-el" class="wi-container"> <li> <img src="images/demo1/1.jpg" alt="image1"/> <h4>Coco Loko</h4> <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <!-- ... --> </ul> |
Se volete vedere Windy in azione cliccate sulla demo. Ciao e alla prossima risorsa!
Demo Download Info | Sito Web | Autore