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.
Vous pouvez visualiser une démo ici.
L’intégration est simple :
On charge les librairies
Et on anime l’image souhaitée via quelques lignes de code, par exemple pour la version basique
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 :
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
grayscaleHover 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 :