Adipoli jQuery Image Hover Plugin – Améliorez le survole de vos vignettes

Vous avez besoin de rendre le survole de vos images plus sexy et moins statique ? J’ai trouvé un petit plugin jQuery qui pourrai vous intéresser, c’est Adipoli jQuery Image Hover Plugin.

adipoli

Vous pouvez visualiser une démo ici.

L’intégration est simple :

On charge les librairies

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

Et on anime l’image souhaitée via quelques lignes de code, par exemple pour la version basique

<script type="text/javascript">
<!-- $(document).ready(function(){ $('#image1').adipoli(); }); //-->
</script>

Il existe de nombreuses options afin de modifier les effets et moduler ces derniers selon vos besoins.

Les options s’ajoutent de cette manière :

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

La liste des options est assez conséquente, et je vous la joint ci-dessous :

startEffect : Default style of image
hoverEffect : Image style on mouse over
imageOpacity : opacity of image considered when start effect is transparent or overlay
animSpeed : Animation speed for the effect
fillColor : Overlay color
textColor : Text Color
overlayText : Default HTML to be displayed on overlay
slices : Number of slices for slice animations
boxCols : Number of boxes in a row for box animations
boxRows : Number of rows for box animations
popOutMargin : Margin of Image popout
popOutShadow : Shadow length of popout image. Shadow works for those browsers which support text-shadow css.

Start Effects:

transparent
normal
overlay
grayscale

Hover Effects:

normal
popout
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpRandom
sliceUpDown
sliceUpDownLeft
fold
foldLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

Pour télécharger le plugin jQuery Adipoli, utilisez le lien github : https://github.com/cube3x/Adipoli
Et la page officielle de présentation de ce plugin jQuery est la suivante : http://cube3x.com/adipoli-jquery-image-hover-plugin

Code code à tous 😉

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

Submit a Comment

Votre adresse e-mail ne sera pas publiée.