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
[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22js%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fjquery.adipoli.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
Et on anime l’image souhaitée via quelques lignes de code, par exemple pour la version basique
[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%3C!–%20%24(document).ready(function()%7B%20%24(‘%23image1’).adipoli()%3B%20%7D)%3B%20%2F%2F–%3E%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
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 :
[pastacode lang= »javascript » manual= »%24(‘%23image1’).adipoli(%7B%0A’startEffect’%20%3A%20’normal’%2C%0A’hoverEffect’%20%3A%20’popout’%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
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 :
