pagePiling.js: sfogliare pagine con jQuery

I plug-in prodotti con jQuery sono davvero molti, quasi infiniti, ma solo quelli che meritano davvero una considerazione notevole, mi invogliano a parlarne su Edit. pagePiling.js permette di creare degli effetti molto interessanti.

L'effetto prodotto da Page Piling, è simile a quello che si ottiene sfogliando le pagine di una rivista. Per la sua natura, questo effetto è ottimo nel caso in cui si voglia costruire l'applicazione basandosi su un layout mono-pagina, che oggi ha raggiunto l'apice della popolarità, grazie a soluzioni quali Bootstrap e plug-in vari di altrettanti CMS.

E' possibile osservare il risultato dello script direttamente dalla home page del progetto, che è costruita con l'animazione in questione, in direzione verticale. E' tuttavia possibile produrre un'animazione orizzontale (che richiama ancor di più la sensazione di sfogliare una rivista) che è possibile osservare qui.

Sia nella home, sia nella pagina Git di sviluppo del progetto, è possibile trovare le informazioni necessarie per utilizzare il plug-in in tutte le sue forme.

Per installare pagePiling.js, dobbiamo incluedere sia jQuery, sia il file CSS dedicato (oltre ovviamente al plug-in, disponibile sia in versione estesa che compatta):

<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>

Oppure usando il servizio CDN offerto al link https://cdnjs.com/libraries/pagePiling.js. Se vogliamo usare alcune feature relative alle equazioni "easing" delle animazioni, abbiamo bisogno di includere anche jQuery UI.

La struttura HTML di base è davvero molto semplice da produrre:

<div id="pagepiling">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

Di default la sezione che comparirà in cima allo stack sarà la prima classe "section", ma questo comportamento è ovviamente customizzabile.

A questo punto, tutto ciò che occorre per produrre l'effetto, è una semplice chiamata al metodo pagepiling, al caricamento del DOM:

$(document).ready(function() {
	$('#pagepiling').pagepiling();
});

Chiamata customizzabile con tutte le opzioni che l'autore ci mette a disposizione:

$(document).ready(function() {
	$('#pagepiling').pagepiling({
	    menu: null,
        direction: 'vertical',
        verticalCentered: true,
        sectionsColor: [],
        anchors: [],
        scrollingSpeed: 700,
        easing: 'swing',
        loopBottom: false,
        loopTop: false,
        css3: true,
        navigation: {
            'textColor': '#000',
            'bulletsColor': '#000',
            'position': 'right',
            'tooltips': ['section1', 'section2', 'section3', 'section4']
        },
       	normalScrollElements: null,
        normalScrollElementTouchThreshold: 5,
        touchSensitivity: 5,
        keyboardScrolling: true,
        sectionSelector: '.section',
        animateAnchor: false,
		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
	});
});

Esistono davvero molti parametri che possiamo impostare per ottenere effetti differenti. Tra questi i più interessanti sono il looping (ovvero lo scroll ulteriore, anche a raggiungimento dell'ultima sezione, sia al top, che al bottom), la navigazione senza ancore (utilizzando lo stesso link), i full background ed i callbacks, che sono estremamente utili per gestire cosa succede all'azionamento delle animazioni ed in altri particolari eventi trigger, come possiamo vedere qui.

Ho provato personalmente lo script in questione con risultati soddisfacenti in ambiente di sviluppo. Per un effetto davvero interessante dedicato ai layout one-page, mi sento di consigliare pagePiling.js come una delle scelte più comode ed immediate, di sicuro impatto, basata sulla presenza di jQuery.