A noter qu'il est important que les classes .reveal-- soient placées en dernier.
Le script javascript en charge de lancer les animations rajoute par défaut la classe .reveal.
Vous pouvez également contrôler le delay de début de l'animation. Pour cela les classes de .reveal--delay-1 à .reveal--delay-7. Vous pouvez également prendre la contrôles des transitions via les classes utilitaires d'animations.
La classe javascript Revealify pour activer l'animation se sert de l'API Intersection Observer MDN Référence.
Grâce à l'attribut data-js-reveal, vous pouvez passer en option le nom classe à ajouter à l'élément et les options par défaut de l'API dans un format JSON. Vous donc ainsi contrôler et personnaliser l'action.
Les options disponibles sont :
-
root définit la racine de l'intersection, par défaut vaut null, ce qui signifie que la racine se réfèrera à l'élément courant. Si le paramètre est de type String on se réfère à l'élément courant ciblé par l'id d'un élément.
-
rootMargin correspond a la marge autour de la racine exprimée généralement en pixel (px).
-
threshold est un nombre compris entre 0 et 1 qui indique à quel pourcentage de la visibilité de la cible, l'action doit être déclenchée.
-
addClass est le nom de la classe à ajouter à la place de la classe par défaut
.reveal