Animations au scroll avec ScrollReveal.js

Dans ce tutoriel Javascript en vidéo, je vous propose de découvrir la librairie ScrollReveal.js.

ScrollReveal permet de faire apparaître, avec une animation, n'importe quel élément de votre document HTML (titres, paragraphes, images, boutons ...) au scroll, avec la possibilité de personnaliser les animations (durée, délais, transitions, transformations CSS).

Très simple d'utilisation, ScrollReveal ne nécessite que des connaissances très basiques en Javascript, ce tuto est donc accessible aux débutants.

Au cours du tuto ScrollReveal.js, nous verrons :

• où télécharger et comment installer ScrollReveal.js,
• les fonctionnalités de base (duration, origin, distance, scale, opacity, easing, rotate, delay),
• les fonctionnalités avancées (reset, mobile, container, useDelay, viewFactor, viewOffset, callback functions),
• comment animer tous les éléments (titres, paragraphes, images, boutons ...) d'un template HTML simple (one page) rapidement et en quelques lignes de codes.

Pour résumer, ScrollReveal est une librairie très légère, qui n'a besoin d'aucune dépendance pour fonctionner, et qui est indispensable de connaître si vous souhaitez faire des animations au scroll.
Les fichiers sources sont fournis, et je reste disponible dans le salon d'entraide.