Construisez votre propre page avec des effets de défilement avec Roll.js
Vous pouvez trouver des dizaines de bibliothèques de défilement sur le Web. La plupart sont écrits en JavaScript et ont leurs propres effets que vous pouvez modifier pour les mises en page simples, les animations de défilement, etc..
Mais qu'en est-il coder vos propres effets de défilement? Ou si vous voulez juste un moyen simple de savoir jusqu'où un utilisateur a fait défiler la page?
Roll.js est la bibliothèque que vous recherchez. Ce le script open source est petit et super facile à utiliser. Vous pouvez le faire fonctionner avec quelques lignes de JavaScript. Et le meilleur de tout cela ne vous oblige pas à effectuer quoi que ce soit de spécifique, mais plutôt vous donne les outils créer vos propres fonctions de défilement personnalisées.
Le but de cette bibliothèque est d'aider les développeurs à structurer leurs effets de défilement sans trop d'effort..
Si vous consultez le référentiel principal de GitHub, vous trouverez un guide de configuration complet avec quelques exemples de fragments. Vous pouvez exécuter des fonctions pour appeler jusqu'où l'utilisateur défile, ou à différent “vitres” sur la page.
Celles-ci fonctionnent mieux avec des mises en page simples mais vous pouvez utiliser Roll.js pour beaucoup.
Avec un seul appel de fonction, vous pouvez extraire des données avec chaque rouleau comprenant:
- Nombre total d'étapes de page (le cas échéant).
- Total% de page défilée.
- Position actuelle sur la page en pixels.
- Hauteur totale de la fenêtre en fonction de la taille du périphérique.
Cela fonctionne également avec les liens de saut qui amènent les utilisateurs vers le bas (ou le haut) à certaines parties de la page..
Mais vous pouvez trouver beaucoup de ces fonctionnalités dans d'autres bibliothèques. Ce qui rend Roll.js si spécial?
Une partie de cela est la syntaxe, mais le gros vendeur ici est la taille totale de la bibliothèque de 8 Ko quand minified. C'est sacrément petit pour une bibliothèque de défilement aussi détaillée!
Vous pouvez voir comment cela fonctionne sur la page de démonstration principale et vous pouvez même téléchargez le code source Roll.js pour creuser vous-même ces démos.
Tout ce qui se trouve dans les démos en direct et les fichiers de bibliothèque bruts peut être extrait de GitHub et ils sont très faciles à utiliser..
Mais si vous avez des questions, des suggestions, ou si vous souhaitez partager vos remerciements pour cette bibliothèque géniale, vous pouvez envoyer un message au créateur @williamngan..
