fullPage.js : une librairie JS pour exploiter le scroll en plein écran

Voici un librairie jQuery permettant d’exploiter le scroll navigateur pour faire des applications single-page.

L’utilisation est simple, le scroll est piloté par la librairie qui permet de basculer d’une slide à une autre avec une animation.

fullPage.js est compatible sur les navigateurs mobiles.

Mise en place des slides avec fullPage :

<div class="section">Slide 1</div>
<div class="section">Slide 2</div>
<div class="section">Slide 3</div>
<div class="section">Slide 4</div>

Le javascript :

// Activation des slides
$(document).ready(function() {
    $.fn.fullpage();
});

La librairie possède de nombreux paramétrages à spécifier en JS sur les animations de scrolls, les boutons, les couleurs des slides, le scroll automatique, le recradrage, le menu, la navigation …

Vous pouvez enterrer les menus contextuels et autres sidebars qui offusquent l’ergonomie des pages. Utiliser le scroll pour guider l’utilisateur naturellement dans un workflow.

Le projet est open-source sous licence MIT, il est disponible avec sa documentation sur Github : github.com/alvarotrigo/fullPage.js

L'article fullPage.js : une librairie JS pour exploiter le scroll en plein écran appartient au blog Alexandre JULIEN.