Scrolly

Scrolly est un moyen simple et facile d'intgégrer des animations à un ou plusieurs éléments HTML en donnant un data-component= "Scrolly" au parent contenant tous les éléments animés et un data-scrolly= "" à l'élément animé.

Comment l'utiliser

Étapes d’installation

Pour avoir un Scrolly, il faut donner un data-component = 'Scrolly’ à l’élément désiré (généralement le body).

Il faut également ajouter un data-scrolly = 'X’ où X est équivalent au nom de l’animation désiré, par exemple :

Il est uniquement nécessaire d’avoir le fichier de style scrolly.scss dans vos fichiers.

Pour installer Lightbox, il suffit d’avoir les fichiers SCSS et JS nécéssaires dans vos dossiers src et donner les bons data aux bons éléments.

Variants

Les variants permettent d'ajouter des groupes d'options préfaits afin de personaliser l'affichage du composant.

DÉFAUT

Par défault, un scrolly effectuera l’animation de l’élément à chaque entrée de celui-ci dans l’écran.

Paramètres

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

noRepeat

Si l’élément de Scrolly possède le data-noRepeat, l’élément sera animé qu’une seule fois.

Classe d'états

Il existe une classe d'état affectant les éléments Scrolly : is-active. Cette classe apparait lorsque l'élément animé apparait dans l'écran et joue alors l'animation. La classe se retirera automatiquement lorsque l'élément quitte l'écran pour réapparaitre plus tard. Si le data-no-repeat est présent, la classe ne disparaitra pas ce qui fait que l'animation ne pourra rejouer.

Animations

Pour créer de nouvelles animations pour le Scrolly, il suffit d'aller voir dans le fichier scrolly.scss. Vou sn'avez alors qu'à utiliser un sélecteur SCSS de data-scrolly du nom de la nouvelle animation que vous allez ajouter et lui donner des paramètres à animés. Les paramètres donnés seront ceux de base avant l'animation. Pour déterminer après l'animation il suffit de rajouter un séélecteur imbriqué. de la classe is-active et lui donner les valeurs désirées. Ne pas oublier d'inclure la transition du paramètre désiré. Voici des exemples d'animation.

Comment l'utiliser en dehors de domComp

À l'intérieur d'un fichier JavaScript, importez la classe `Scrolly` que vous aurez préalablement intégré à votre projet.

Dans l'exemple ci-dessus, element est égal au HTMLElement qui a l'attribut data-component="Scrolly"