Défilement complet de la page avec le plugin jQuery viewScroller.js

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 construire mises en page d'une seule page cette faire défiler comme des blocs avec un coup de la molette de défilement (ou pavé tactile). Cela crée une mise en page contrôlée dans laquelle les parchemins déplacent l’utilisateur à travers les différentes sections d’une page avec les options suivantes: 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 est ne pas une librairie JavaScript indépendante. Il repose sur jQuery et deux plugins spécifiques: jQuery Mousewheel et JQuery Easing. Ceux-ci sont les deux requis pour que les effets de défilement fonctionnent correctement.

Cela peut entraver la valeur de viewScroller car il faut 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 obtenir un application web à défilement d'une page courir sans trop de code.

Il fait cependant, utiliser des classes et des identifiants très détaillés pour créer l'effet de défilement. Vous pouvez éditer ces classes dans votre propre fichier CSS ou écrasez-les dans le code de base. Vous trouverez un liste complète sur la page de repo avec noms de classe et données d'installation par défaut.

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

Si vous êtes d'accord avec une application Web alimentée par jQuery, viewScroller est une fantastique bibliothèque gratuite à utiliser. Il faut pas mal de dépendances mais ils ne devraient pas être difficiles à configurer.

Jetez un coup d'oeil au démo en direct et voyez ce que vous en pensez. Si vous aimez le comportement UX et le défilement, suivez les instructions guide d'installation sur GitHub pour commencer.