Scrollreveal est un des nombreux javascripts qui peuvent vous aider à obtenir l’effet d’apparition d’un éléments d’une page web quand il entre dans l’écran visible.
Voici une procédure simplifiée pour le mettre en place :
1. Charger le script dans votre page web
Placer ce code dans le <head> de votre page web
<script src="https://unpkg.com/scrollreveal"></script>Pas besoin de bibliothèque comme jQuery, ce script est autonome.
Contrairement aux bonnes habitudes de placer les scripts en fin de page, juste avant </body>, ici, il est placé dans le <head>, justement pour être déjà prêt à entrer en action lorsque l’élément animé sera chargé.
2. Créer les animations que vous désirez
Une méthode des plus simples est de créer d’avance les animations et leur assigner une class en utilisant les indications fournies par Scrollreveal. Cette commande doit être placée juste après le chargement de Scrollreveal fait au point 1.
A. Animation par défaut
Avec la commande ci-dessous, tous les éléments avec class="apparition" seront animés (apparition très rapide, sans déplacement, quand l’élément entre dans l’écran).
<script>
ScrollReveal().reveal('.apparition');
</script>B. Personnaliser l’animation
Ensuite, il est possible d’apporter des modifications au comportement de l’animation.
L’exemple ci-dessous demande à l’objet animé d’attende 500 millisecondes et d’effectuer un déplacement de 100px à partir du bas (par défaut) lors de son apparition .
<script>
ScrollReveal().reveal('.sr-bottom', {delay:500,distance:'100px'});
</script>Le suivant demande la même chose mais à partir de la droite.
<script>
ScrollReveal().reveal('.sr-right', {delay:500,distance:'100px',origin:'right'});
</script>On peut dès lors définir une série de comportements prédéfinis pour les appliquer plus tard sur n’importe quel élément du code html :
<script>
ScrollReveal().reveal('.sr-bottom', {delay:900,distance:'100px'});
ScrollReveal().reveal('.sr-right', {delay:600,distance:'100px',origin:'right'});
ScrollReveal().reveal('.sr-left', {delay:300,distance:'100px',origin:'left'});
</script>3. Activer l’animation sur les éléments désirés
Il suffit maintenant d’assigner la class désirée sur les éléments html :
<h1 class="sr-left">Ne pas sur-exploiter les animations !</h1>
<p class="sr-right">La sur-utilisation des animations dans une page html va être contre-productif. Il est préférable de réserver ces animations aux éléments que l'on veut mettre en valeur</p>
<img src="image1.jpg" class="sr-bottom">Le titre h1 va donc apparaître depuis la gauche, le paragraphe p depuis la droite et l’image img depuis le bas. Ils vont se succéder puisque les vitesse de delay sont différentes.
4. Aller plus loin
Il y a beaucoup d’autres fonctions disponibles pour personnaliser l’apparition de vos éléments. Vous les retrouvez toutes sur cette page, notamment dans la partie option/animation. Leurs valeurs par défaut sont indiquées également.