Corsi on-line

Effetti hover sulle immagini con jQuery e Adipoli

Adipoli è un semplice plugin per il framework JavaScript jQuery che permette di applicare velocemente effetti hover (transitions al passaggio del cursore del mouse) alle immagini; l’estensione mette a disposizione ben 20 diverse transizioni, tutte richiamabili attraverso delle specifiche funzioni e configurabili tramite apposite proprietà. La libreria è di utilizzo praticamente immediato, una volta scaricato il plugin dalla sezione download del sito ufficiale del progetto si dovranno eseguire pochi brevi passaggi:

La prima pocedura da richiesta sarà quella relativa all’inclusione del framework, dell’estensione stessa e del CSS associato:

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
 <script src="js/jquery.adipoli.min.js" type="text/javascript"></script> 

Fatto questo, si potrà associare il plugin all’identificatore di un’immagine sulla quale si desidera applicare l’effetto:

<script>
       $('#image1').adipoli();
 </script>

Infine, sarà possibile procedere con la fase di configurazione dell’effetto:

$('#image1').adipoli({
     'startEffect' : 'normal',
     'hoverEffect' : 'popout'
 });

Sul sito Web degli sviluppatori è presente la documentazione completa relativa all’utilizzo dell’estensione, chi desiderasse metterla alla prova senza installarla ha a disposizione anche una demo on line perfettamente funzionante.

Post correlati
I più letti del mese
Tematiche