Scrolly

Cette composante permet d'ajouter des animations d'apparition au défilement de la page. Les animations, sur des éléments cibles, déclanchées lors de l'arrivée de l'élément dans la zone d'affichage, ici le viewport. viewport

Comment l'utiliser

Afin d'utiliser la composante, mettre l'attribut data-component="Scrolly" directement sur la balise body.

Ensuite, pour ajouter une animation sur un élément cible, il faut lui ajouter l'attribut data-scrolly avec la valeur correspondant au nom de votre animation déterminée dans votre css.

Animations

Par défaut, Scrolly contient plusieurs animations préconçues faciles à utiliser. Il est aussi possible d'en créer de nouvelles.

fromBottom

Animation d'arrivée à partir du bas avec un fondu progressif.

fromLeft

Animation d'arrivée à partir du bas avec un fondu progressif.

fromRight

Animation d'arrivée à partir du bas avec un fondu progressif.

Animations personnalisées

Vous pouvez vous-même créer facilement de nouvelle animation en l'ajouter au bon endroit dans scrolly.scss .

Vous aurez d'abord besoin de déterminer :

1. L'état par défaut de votre composante (généralement caché et transformé grâce à un transform .)
2. L'état actif de votre élément (où il devrait être une fois l'animation terminée)

Finalement, vous devrez vous assurer que votre code soit à l'intérieur d'un élément ayant la classe .has-js afin d'éviter des problèmes lorsque le JavaScript est désactivé ou brise.

Structure d'une animation en css

Prenons ici l'exemple de l'animation fromBottom mentionnée ci-haut.

Il est important de garder la transition sur les propriétés qui sont appelées à changer entre les deux états. Essentiellement, tout ce qui est déplacé / caché dans l'état par défaut doit revenir à l'état que le navigateur lui donnerait par défaut sans vos transformations.

Paramètres

Les paramètres permettent d'ajuster des options précises afin de personaliser davantage le comportement de Scrolly.

NO-REPEAT

Ce paramètre permet d'éviter que les animations se répètent plus d'une fois. Lorsqu'il est présent, les éléments cibles, une fois apparus, ne disparaitront plus.