Simuler un effet parallaxe avec pageScroller.js

Plugin-Page-Scroller

Vous désirez une navigation en scroll vertical très fluide, optez pour PageScroller un plugin jQuery.

Actuellement, la navigation en « one page » de type Scrolling est très à la mode sur internet.
Ce système offre la possibilité d’ajouter une navigation ergonomique sur une page internet qui dispose souvent d’un contenu très riche.

Le plugin PageScroller permet ainsi la mise en place automatique d’un menu dans différentes parties de la page web.
En cliquant sur le menu, un scrolling vertical est réalisé en jQuery avec un effet « smooth » assez sympathique. Ce plugin très pratique permettra d’éviter les scrolls sauvages des internautes.

Au niveau du code, sa mise en place reste très simple. Il suffit d’englober le tout dans une div conteneur #wrapper sans oublier de spécifier des différentes parties de la page web dans des divs .section :

Il va sans dire que le nom des id et des classes peuvent être personnalisés.

Lorsque le markup HTML est bien en place, vous n’aurez qu’à initialiser le plugin :

PageScroller est très riche et possède de nombreux callbacks et options :

  • scrollOffset : le nombre de pixels à laisser en haut du scroll
  • sectionClass : la classe des divs section
  • navigationCLass : la classe de la boîte de navigation
  • navigation : un tableau des libellés des sections pour le menu
  • animationSpeed : la vitesse d’animation du scroll
  • animationBefore : un callback appelé avant l’animation
  • animationClomplete : un callback appelé après l’animation
  • onChange : un callback appelé au changement de la navigation

Également, l’ajout de flèches de navigation vers le bas et le haut est possible.
Ces derniers peuvent être couplés aux fonctions de l’API :

il faut savoir que le package qui est en téléchargement gratuit sur le site du plugin dispose déjà de nombreux éléments de design pour un lancement rapide du site One page en vertical scrolling.
Vous trouverez dans la package, des flèches de navigation, des skins pour le menu…

Cependant, il faut faire attention au niveau de la compatibilité navigateur.
En effet, celle-ci est encore assez limitée à l’heure actuelle puisqu’elle est toujours en version beta. L’utilisation des versions en dessous d’Internet Explorer 9 est donc à proscrire.

Répondre