Scrolly

Le scrolly peut vous permettre de faire une belle animation pour le scoll dans la page.

Comment l'utiliser

HTML

Pour commencer, il faut mettre un div en mettant une classe 'site-container' et un data-component 'Scrolly'.

Ensuite, il faut déterminer quoi animer!

Il faut ajouter un data-scrolly avec l'animation désirée.

Les animations

fromUp

L'animation qui fait apparaître l'élément d'en haut.

fromBottom

L'animation qui fait apparaître l'élément d'en bas.

fromRight

L'animation qui fait apparaître l'élément par la droite.

fromLeft

L'animation qui fait apparaître l'élément par la gauche.

flipFromBottom

L'animation qui fait apparaître l'élément d'en bas à 100%.

Comment ajouter de nouvelles animations

HTML

Tout ce qu'il faut faire, c'est ajouter un data-scrolly avec le nom de l'animation voulue.

CSS

Dans la classe .has-js ajoutée par le JavaScript,

il faut ajouter le code de l'animation voulue.

L'attribut data-repeat

Il faut l'utiliser pour ne pas répéter l'animation plus qu'une fois.

Voir un démo de « scrolly »