Adipoli è un plugin in jQuery utilizzato per apportare eleganti effetti su immagini al passaggio del mouse.
L’attivazione di un effetto hover è molto semplice.
Codice HTML da inserire all’interno del tag head
|
1 2 3 |
<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> |
Se vuoi applicare l’effetto hover su di un’immagine con ID di esempio “image1″, richiamerai il plugin adipoli nel seguente modo
|
1 |
<script>$('#image1').adipoli();</script> |
Opzioni aggiuntive
|
1 2 3 4 |
$('#image1').adipoli({ 'startEffect' : 'normal', 'hoverEffect' : 'popout' }); |
Opzioni disponibili
startEffect: stile predefinito dell’immagine
hoverEffect: stile dell’immagine al passaggio del mouse
imageOpacity: opacità dell’immagine quando l’effetto iniziale è trasparente o sovrapposto
animSpeed: velocità di animazione dell’effetto
fillColor: sovrapposizione colore
textColor: colore testo
overlayText: HTML di default da visualizzare sull’overlay
slices: numero di slices per le animazioni
boxCols: numero di caselle in sequenza per le animazioni a quadri
boxRows: numero di righe per le animazioni a quadri
popOutMargin: margine dell’immagine di popup
popOutShadow: lunghezza dell’ombra dell’immagine di popup. L’ombra funziona con i browser che supportano la proprietà css di text-shadow.
