Je vous propose pour ce onzième article de l’année, une présentation brève d’une librairie Javascript très connue sur la toile : wow.js. Elle permet de réaliser une animation sur vos éléments html au scroll de l’utilisateur sur vos pages.
Une librairie ?
En réalité, Wow.js utilise une deuxième librairie, mais côté CSS cette fois-ci. Ce Framework se nomme Animate.css. C’est donc une dépendance si vous voulez. Animate s’occupe des effets demandés tandis que Wow écoute le scroll de l’utilisateur. Voilà comment initier l’outil en Javascript:
new WOW().init();
Et mon exemple sur Codepen :
https://codepen.io/lintermediaire/pen/PoGOKgr
Vous verrez par exemple à la ligne 14, l’élément HTML qui a les classes suivantes : wow animated fadeInLeft. Tout est dit : wow est la classes de base pour lier votre élément à wow.js. Tandis qu’animated et fadeInLeft sont des classes liées à Animate.css qui exécute l’animation en question.
Si vous scrollez plus bas, vous verrez également apparaître l’image.
Vous pouvez également ajouter des options d’animations sur l’élément en ajoutant data-wow-nom-de-l-option sur votre élément en spécifiant la valeur évidemment. Exemple : data-wow-delay= »1s » pour un délai d’une seconde.
