Chargement…
Des Effets de Défilement Avec Stroll.js

Créer Des Effets de Défilement Avec Stroll.js



Les effets de défilement sont à la mode ses jours-ci et une des tendances en 2014. On vous a déjà montrer comment créer des effets de défilement seulement en CSS mais pour des défilement plus complexe vous aurez besoin de Javascript. Il existe différents jQuery Plugin que vous pouvez utiliser, mais aujourd’hui on va faire le point sur Stroll.js.

Créer Des Effets de Défilement en Javascript

Des Effets de Défilement Avec Stroll.js

Le Stroll.js

Stroll.js est une petite librairie JavaScript qui contient plusieurs animations et effets de défilement sous forme de Liste (UL et LI). Le principe est que vous avez un groupe d’éléments dans une liste déroulante et qui va s’animer on utilisant Stroll.js.

Pour voir tous les effets possible avec ce script, cliquez : ICI

Utiliser Stroll.js pour créer un défilement de contenu

Dans notre exemple, on va essayer de créer un défilement de contenu avec plusieurs effets dés qu’un utilisateur commence à descendre en bas de page avec le Scroll bouton de la souris ou on cliquant sur la barre de défilement.

La Structure de Notre Page

D’après la documentation de ce script, l’effet de défilement se met en marche dés qu’il y a une appel d’une class sur une liste (UL). Pour faciliter les choses, on va créer une Div dont on va ajouter un effet FLIP(D’autres effets sont sur css/stroll.min.css), puis le javascript effectuera l’effet demandé sur le contenu de notre liste (LI). Alors notre code sera comme suit :
HTML

La Feuille de Style CSS
C’est dans cette partie que tout devient intéressant!
Pour commencer, il faut mettre notre UL en position Relative, une largeur de 800px et une hauteur de 510px, effectuer un Padding et Margin (Par rapport à votre site).
Mais le plus important c’est list-style doit avoir une valeur None, un overflow-x Hidden (caché) et un overflow-y: scroll; pour être sûr que notre liste se défilera en bas.

Pour le contenu de notre LI, on lui donne une position Relative, une largeur de 200px, un z-index: 2; et un overflow Auto (automatique), ajouter un padding et Margin par rapport à votre site.

Notez qu’on ajouter nth-child(odd), c’est juste un sélecteur qui donne une couleur à une Zone, on l’utilise pour différencier les contenus de notre animation.

Pour l’effet de Cercle sur les images :

En fin, on appel le script pour lancer l’animation sur le contenu de notre DIV :

Voila, vous pouvez maintenant télécharger le code source de cette animation :

Télécharger Code Source

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire