Défilement en pleine page avec le plugin jQuery viewScroller.js

Les effets de défilement JavaScript ont été autour depuis des années avec des dizaines de grandes bibliothèques à choisir. Mais un nouveau concurrent sur le terrain est viewScroller.js .

Cette bibliothèque très petite mais puissante peut créer des mises en page d'une seule page qui défilent comme des blocs d'un simple balayage de la molette de défilement (ou du pavé tactile). Cela crée une disposition contrôlée dans laquelle les défilements déplacent l'utilisateur à travers des sections individuelles d'une page avec une précision au pixel près .

Naturellement, c'est une bibliothèque complètement libre disponible sur GitHub et facile à installer avec Bower ou npm .

Cependant, viewScroller.js n'est pas une bibliothèque JavaScript indépendante . Il repose sur jQuery et deux plugins spécifiques: jQuery Mousewheel et jQuery Easing . Ces deux éléments sont requis pour que les effets de défilement fonctionnent correctement.

Cela peut nuire à la valeur de viewScroller, car il suffit de quelques bibliothèques JS pour fonctionner. Mais si vous utilisez déjà jQuery de toute façon, c'est une évidence. viewScroller.js offre la méthode la plus simple pour exécuter une application Web à défilement unique sans beaucoup de code.

Il utilise cependant des classes et des ID très détaillés pour créer l'effet de défilement. Vous pouvez modifier ces classes dans votre propre fichier CSS ou les remplacer dans le code de base. Vous trouverez une liste complète sur la page de repo avec les noms de classe et les données de configuration par défaut .

La façon la plus simple de commencer est de cloner les démos de viewScroller . Ils ont un avec une barre latérale droite, un autre avec une barre latérale gauche, et un avec deux barres latérales prenant en sandwich le contenu au milieu.

Si vous êtes d'accord avec une application web jQuery, viewScroller est une bibliothèque gratuite fantastique à utiliser. Il a besoin de quelques dépendances, mais elles ne devraient pas être difficiles à configurer.

Jetez un coup d'œil à la démo en direct et voyez ce que vous en pensez. Si vous aimez l'UX et le comportement de défilement, suivez le guide d'installation sur GitHub pour commencer.