23
FEV

PageScroller - Optez pour la navigation en scroll vertical avec jQuery

Publié le 23/02/12 à 09h31 par DJo

PageScroller est un plugin jQuery permettant de mettre en place une navigation en scroll vertical très fluide.

PageScroller est un plugin jQuery permettant de mettre en place une navigation en scroll vertical très fluide.

Très en vogue sur le web, la navigation de type Scrolling en "one page" permet d'ajouter une navigation ergonomique sur une page web souvent très haute en contenu.

PageScroller vous permet de mettre en place de manière automatisée un menu des différentes parties de votre page.

Au clic sur le menu, un scrolling vertical est effectué en jQuery avec un effet "smooth" très sympa.

Pratique pour éviter les scrolls bruyants de vos visiteurs :)

Côté code, très simple à mettre en place, il faut englober le tout dans une div conteneur #wrapper et déterminer les différentes parties de la page dans des divs .section:

<div id="wrapper">
    <div class="section">
        Contenu...
    </div>

    <div class="section">
        Contenu...
    </div>

    <div class="section">
        Contenu...
    </div>
</div>

Bien sûr, le nom de vos classes ou id sont personnalisables.

Une fois le markup HTML mis en place, transformez en scroll vertical avec la ligne JS suivante:

$('#wrapper').pageScroller({ sectionClass: 'section' });

Comme tout bon plugin jQuery qui se respecte, PageScroller possède bon nombre d'options et callbacks:

  • animationSpeed: Vitesse de l'animation du scroll
  • scrollOffset: Nombre de pixels à laisser en haut du scroll
  • sectionClass: La classe des divs section
  • navigationClass: La classe de la box de navigation
  • navigation: Un tableau des libellés des sections pour le menu
  • animationBefore: Callback appelé avant l'animation
  • animationComplete: Callback appelé après l'animation
  • onChange: Callback appelé au changement de la navigation

Il est possible de rajouter des flèches de navigation vers le haut et le bas et de les coupler aux fonctions de l'API:

  • next()
  • prev()
  • goTo(num)

PageScroller - Package à télécharger complet

Le package à télécharger gratuitement contient déjà un bon nombre d'éléments de design pour lancer rapidement votre site One page en vertical scrolling.

Vous trouverez des skins pour les menus, les flèches de navigation...

Attention tout de même, la compatibilité navigateur est assez limitée pour le moment (toujours en version beta), oubliez donc Internet Explorer en dessous de la version 9...

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web