ScrollReveal.js, une librairie JS pour déclencher des animations au scroll

ScrollReveal.js est une librairie JavaScript qui permet de déclencher l’apparition d’un élément HTML lorsqu’il « entre dans le viewport », autrement dit lorsque celui-ci devient visible à l’écran (chargement et scroll), notamment à l’aide d’une configuration utilisant un attribut data-* HTML5.

« Animations… animations everywhere ! »

Si vous cherchez des effets animés faciles à mettre en place pour enrichir votre site web, scrollReveal.js est fait pour vous ! Cette librairie JS propose des animations de type « fade » lorsqu’un élément apparait à l’écran. C’est le cas au chargement de la page pour les éléments situés dans la partie haute de votre site, ou au scroll de la page pour les éléments qui ne sont pas visibles au chargement.

scroll_reveal_js

Pour chaque élément HTML que l’on veut animer, il faut configurer un attribut data-scrollReveal qui prend pour valeur plusieurs mots-clés qui vont définir le mouvement souhaité. Par exemple, data-scrollreveal="enter from the top over 0.5s" définit un fondu enchainé du haut vers le bas sur une durée de 0.5 seconde.

ScrollReveal.js met alors en place les transitions et transformations CSS correspondantes, et ce peu importe l’élément choisi ; cela fonctionne aussi bien avec une image qu’avec une div contenant plusieurs balises. Vous pouvez aussi configurer le script pour que l’animation ne se déclenche qu’une seule fois, c’est-à-dire à la première visualisation.

Utilisation de base

On commence par ajouter l’attribut data-scrollReveal sur les éléments HTML que vous souhaitez animer. Si l’attribut est vide, le script applique une animation par défaut.

<!-- Reveal using defaults. -->
<div data-scrollReveal>Hello world!</div>

Mais c’est encore plus amusant si vous définissez vos propres paramètres d’animation avec les fameux mot-clés. Ces-derniers permettent une configuration personnalisée comme la direction, la distance, la durée, ou encore le délai avant l’animation.

<!-- Reveal using custom parameters. -->
<div data-scrollReveal="enter left and move 50px over 1.33s">Foo</div>
<div data-scrollReveal="enter from the bottom after 1s">Bar</div>
<div data-scrollReveal="wait 2.5s and then ease-in-out 100px">Baz</div>

Et on termine par inclure la librairie scrollReveal.js et faire l’appel à la fonction sur l’objet window, avant la fermeture de la balise body. Et hop, c’est animé !

<script src="scrollReveal.js" type="text/javascript"></script>
<script type="text/javascript">window.scrollReveal = new scrollReveal();</script>

ScrollReveal.js permet donc de mettre en place rapidement des animations pour dynamiser le contenu de votre site. C’est d’ailleurs un effet très prisé pour faire apparaitre des textes et des images de façon asynchrone au fur et à mesure que la page défile. Facile à mettre en place et efficace.

Requis : JavaScript
Compatibilité : Navigateurs supportant les transitions CSS3
Démonstration : http://julianlloyd.me/scrollreveal/
GitHub : https://github.com/julianlloyd/scrollReveal.js
Licence : MIT

Commentaires