12 ressources Javascript centrées sur l’utilisation du scroll

Aujourd'hui, le BlogDuWebdesign vous propose une liste de ressources Javascript centre sur les interactions avec le scroll de vos utilisateurs. Déplacement souple quel que soient le navigateur, barre de scroll customisables, ou parallax et apparitions dynamiques d'éléments, il y en a pour tous les gouts !

AnchorScroll

AncrorScroll est un plugin permettant de fluidifier les transitions entre les ancres de votre site. Très personnalisable, cette ressource permet aussi d'effectuer des actions juste avant ou a la fin d'un mouvement, ce qui peut être très pratique.

Stellar.js

Stellar.js est une librarie parallax que je trouve très agréable à utiliser.

Waypoints

Avez-vous déjà eu envie de lancer une animation pile au passage d'un element ? C'est exactement ce que vous propose Waypoints

Scroll Reveal

Comme son nom l'indique, ScrollReveal permet de charger et faire apparaitre vos éléments lors du scroll, pour ajouter un peu de dynamisme à votre site.

WOW

Wow. Ce plugin permet de déclencher des animations CSS au scroll. Such plugin.

Nano scroller

Nano scroller et Perfect Scrollbar sont deux scrollbars personnalisables. Je ne saurais trop laquelle vous conseiller, je n'en ai utilisé aucune pour l'instant, mais la bibliothèque que j'utilisais pour cela n'est plus maintenue, donc cela ne saurait tarder.

Perfect Scrollbar

Scroll Progress

ScrollProgress affiche une petite barre de progression personnalisable lors du scroll de votre site.

 

Zone dangereuse

Les plugins suivants sont à utiliser avec parcimonie. En effet, leur utilisation peut avoir des effets inattendus sur les navigateurs et/ou la patience de vos utilisateurs.

Faites vos tests navigateurs avec la plus grande attention, et garder à l'esprit ce que vos visiteurs sont venus chercher sur votre site.
Pour plus d'informations, je vous propose la lecture d'un article dédié au sujet : Les dangers du Scroll-jacking pour l’expérience utilisateur

Scroll Magic

Envie de créer un site interactif et se construisant au scroll ? Si oui, Scroll Magic est peut-être l'outil qu'il vous faut. Donnez vie à vos rêves de storytelling les plus fous ! (molettes de rechanges pour souris non incluses).

jQuery.ScrollSpeed

Ce petit plugin vous permet de choisir très précisément la vitesse de defilement de votre scroll et d'obtenir une expérience de scroll fluide (comme sur safari ou Firefox) sur tous les navigateurs.

Space.js

Space.js est un outil permettant de mettre en place et d'animer des présentations avec des effets de déplacement 3D.

PagePiling

Je suis sur que vous avez déjà dû un exemple de site full-screen, où nous naviguons d'écran en écran comme dans un diaporama. PagePiling vous permettra d'obtenir simplement ce genre d'effets de navigation.