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

17 mars 2014
8 700 vues

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

  • Loiseau2nuit #SEO

    Tsk tsk tsk, tâchons d’être tout de même un minimum conforme ! On ne dit pas :

    window.scrollReveal = new scrollReveal();

    On dit :

    window.scrollReveal = new scrollReveal();

    Sinon ExpiresByType ne fonctionnera pas sur la ressource ainsi appelée ;)

    Plus sérieusement, cette « Maitre Capello-titude » une fois passée, beau boulot mec ! Et merci :)

    • http://www.megaptery.com/ Pierre

      C’est corrigé ;-)

      • Loiseau2nuit #SEO

        Belle réactivité :)

        En passant je suis allé poster une « issue » sur le GitHub aussi (j’ai compris après coup que tu n’étais apparemment pas l’auteur initial du script en fait ?)

        • http://www.megaptery.com/ Pierre

          Exactement, je ne fais que partager le script.

  • http://boulevardduweb.com/ Hoareau Cédric

    Bonjour, merci pour cette découverte.

    Mais j’ai repris comme c’est codé mais j’ai toujours une erreur me disant que scrollReveal n’est pas défini (fonction anonyme). Besoin d’aide svp.

    Cordialement.

  • Fabien CANU

    J’aime beaucoup la sémantique sur les class, tellement logique et efficace. Un poil verbeux, mais l’efficacité l’emporte tout de même.

  • PEL

    Après avoir scrupuleusement suivi les conseils de mise en place, cela ne fonctionne pas. Quelqu’un a-t-il suivi exactement les indications données et cela a fonctionné? Testé sous Chrome et Firefox. Merci

    • PEL

      Trouvé, il suffit de ne pas suivre ce tutoriel mais de lire le ReadMe joint aux fichiers. ;)

  • Freddie

    Bonjour ! Je cherchais depuis un moment comment faire un site onepage avec apparition de la nav. seulement après une section de sliders… je vous montre l’image. Du coup, il faut vraiment utiliser javascript ? merci !!

    • http://www.megaptery.com/ Pierre

      Oui, une couche JS est nécessaire pour calculer le scroll et déclencher des événements, par exemple l’ajout d’une classe CSS pour faire apparaitre le menu.