Les effets de défilement font fureur de nos jours. Lorsque l'utilisateur se déplace vers le bas de la page, le contenu fait plus que se déplacer vers le haut de l'écran, il prend vie et devient plus intéressant. Malheureusement, il n'y a pas de moyen facile d'obtenir ces effets avec du CSS pur. Si vous ne connaissez pas JavaScript, vous n'avez pas de chance.
C'est là qu'intervient Stroll.js. C'est une bibliothèque très facile à implémenter qui facilite grandement l'application d'effets de défilement. Tout ce que vous avez à faire est de coller quelques brèves lignes de JavaScript, le reste est entièrement géré avec HTML et CSS. Continuez à lire et je vais vous montrer comment ça marche.
Rencontrez Stroll.js
Stroll.js est une petite bibliothèque JavaScript très soignée qui apporte de nombreuses animations accrocheuses à l’action de défilement des éléments de la liste. L'idée est que vous avez un groupe d'éléments dans une liste déroulante et que vous utilisez Stroll.js pour rendre la navigation sur cette liste plus intéressante.
La page d'accueil du projet (illustrée ci-dessus) contient de nombreuses démos que vous pouvez essayer pour voir les types d'effets inclus. Les animations elles-mêmes sont en fait construites avec de simples transformations CSS3. Vous devriez donc pouvoir facilement ajouter et personnaliser la bibliothèque avec vos propres idées.
Construisons une démo!
Chaque fois que je tombe sur un projet cool comme Stroll.js, je veux immédiatement plonger dedans, casser les pneus et voir comment tout cela fonctionne. Lire une documentation ennuyeuse, c'est bien beau, mais je ne peux vraiment pas avoir une idée de quelque chose comme ça avant de l'essayer moi-même. C'est ce que nous allons faire aujourd'hui.
Démo: Cliquez ici pour lancer.
HTML
Pour commencer, nous savons que nous aurons besoin d’une liste, car c’est l’essentiel de Stroll.js: animer les défilements de liste. Les éléments de la liste sur la démo n'étaient qu'une simple ligne de texte, mais je souhaite aller beaucoup plus loin pour voir comment Stroll.js le gère. Nous ferons en sorte que chaque élément de la liste contienne une image, un titre et un paragraphe.
Si vous utilisez le codage Zen comme moi, tapez ce qui suit dans votre éditeur HTML (sinon, tapez simplement la partie suivante manuellement).
Comme vous pouvez le constater, nous avons commencé avec une liste non ordonnée, puis nous lui avons donné un enfant list-item, qui contient les trois éléments que nous venons de dire et que nous voulions. Lorsque vous appuyez sur l'onglet ou sur le raccourci utilisé par votre éditeur, le code HTML suivant sera développé:
Images
Pour les styles d'image, nous ajouterons une marge de 20 pixels pour leur donner un peu de marge de manœuvre et un rayon de bordure de 50% (look ma, pas de préfixe de navigateur!) Pour que les vignettes soient parfaitement arrondies. De plus, nous laisserons les images à gauche de manière à ce que le texte apparaisse le long de celles-ci plutôt que sous celles-ci.
Typographie
Pour le type, nous devons définir nos styles h2 et paragraphe. J'ai utilisé un raccourci pour donner à l'en-tête un traitement audacieux sans empattement et au paragraphe un poids normal, un traitement empattement. Notez également que le paragraphe a une couleur légèrement plus claire pour aider à différencier les deux visuellement.
liste
Il est maintenant temps de passer à la plus grosse part de CSS, la dernière pièce qui donnera une apparence parfaite à nos éléments de liste. Définissez la position sur relative, la largeur sur 800px et la hauteur sur 510px. Appliquez ensuite des marges et un remplissage et assurez-vous que le style de liste est défini sur none.
Ce qu'il faut vraiment faire, c'est le débordement. Définissez overflow-x sur hidden et sur overflow-y pour faire défiler la liste de manière à faire défiler votre liste.
Maintenant que les styles de liste non ordonnée ont été élaborés, il est temps d'explorer et de définir les styles d'élément de liste. Encore une fois, définissez la position (relative), la hauteur (200px) et le remplissage (20px). Puis définissez les couleurs pour l'arrière-plan et le type, définissez le débordement sur auto et le z-index sur deux.
La partie délicate ici est ce deuxième sélecteur. J'utilise nth-child (impair) pour faire varier la couleur de chaque autre élément de liste, ce qui permet à chacun de se distinguer du suivant. Cela n'est pas bien supporté sur IE, mais Stroll.js ne l’est pas non plus, donc nous allons l’utiliser quand même. Cependant, souvenez-vous toujours que vous pouvez utiliser Selectivizr pour augmenter la prise en charge de votre sélecteur. En fin de compte, si les effets de défilement ne sont pas largement pris en charge, ce n'est pas grave (ce ne sont que des merveilles pour les yeux), mais vous devez créer le style visuel le plus transversal possible.
Vérification des progrès
La plupart de notre travail est terminé! Notre liste est fantastique, tout ce qui reste à faire est de la donner à la vie avec un tout petit peu de JavaScript. Ça ne fera pas mal un peu, je le promets.
JavaScript
Lorsque nous avons démarré ce projet, j’ai promis que vous n’aviez pas besoin de connaître JavaScript pour continuer.Cependant, je vous lance JavaScript ici! Ce qui donne? La vérité est que vous avez besoin d'un peu de JS, mais une action copier-coller fonctionnera parfaitement et il sera facile de la personnaliser pour votre projet.
Mélanger ce code dans au bout du corps dans votre HTML.
Voir? Ce n'était pas si mal. Tout ce que vous avez à faire pour le personnaliser est de vous assurer que vous ciblez le bon ID. Nous avons utilisé? dans notre projet aujourd'hui, mais n'hésitez pas à changer cela pour vos propres utilisations.
C'est vivant!
Avec ça on a tous fini! Tout ce que nous avons à faire pour changer l’effet est d’appliquer une classe différente sur la liste non ordonnée. Pour la démonstration, j'ai utilisé les effets Flip, Curl et Tilt.
Démo: Cliquez ici pour lancer.
Qu'est-ce que tu penses?
Penser à rendre les événements de défilement plus intéressants ouvre un tout nouveau domaine de possibilités de conception intéressantes. Comme avec tout effet, ceux-ci peuvent être utilisés pour le bien ou pour le mal. En les prenant trop loin ou en les abusant, vous obtiendrez une page vertigineuse que personne ne voudra utiliser. Utilisez Stroll.js avec parcimonie pour obtenir un effet beaucoup plus important.
Laissez un commentaire et dites-nous ce que vous pensez de Stroll.js. Aimez-vous faire défiler les animations ou préférez-vous que les développeurs arrêtent de trouver de nouveaux emplacements pour coller davantage d'animations? Laissez nous savoir!