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.