Jquery Scrollify consente di scorrere il sito in schermate successive mediante la rotellina del mouse o con la tastiera, mediante i tasti pagina su e pagina giù. Il plugin supporta anche gli eventi di tocco.

jQuery Scrollify è rilasciato con licenza MIT ed è compatibile con tutti i browser moderni: IE 7+, Chrome, Firefox, Opera, Safari.

Jquery Scrollify: scorrere la pagina per schermate successive

Jquery Scrollify: scorrere la pagina per schermate successive

Usare Jquery Scrollify

Per evitare margini o padding che potrebbero rovinare l’effetto scorrimento si consiglia di impostarli a zero, oppure, di utilizzare un foglio di stile di reset.

Il contenuto della pagina è articolato in una serie di elementi, nell’esempio una serie di div, che rappresentano le diverse schermate durante la fase di scorrimento.

<div class="box"><h1>Lorem ...</h1></div>
<div class="box"><h1>Lorem ...</h1></div>
<div class="box"><h1>Lorem ...</h1></div>
<div class="box"><h1>Lorem ...</h1></div>
<div class="box"><h1>Lorem ...</h1></div>

Al posto degli elementi div si può usare un altro elemento equivalente in base alle proprie necessità, ad esempio article o section, purché ogni elemento che rappresenta una schermata sia contrassegnato dalla stessa classe (box) che sarà usata per attivare il plugin.

Scaricare e inserire nel proprio documento una copia di jQuery e di Scrollify subito prima del tag di chiusura dell’elemento body.

  <script src="js/jquery-3.0.0.min.js"></script> 
  <script src="js/jquery.scrollify.min.js"></script> 
</body>
</html>

Inserire un altro elemento script per attivare il plugin con la funzione scrollify().

<script src="js/jquery-3.0.0.min.js"></script> 
<script src="js/jquery.scrollify.min.js"></script> 
<script>
 $(function() {
   $.scrollify({
     section : ".box"
   });
 });
</script>
</body>
</html>

La funzione scrollify() accetta come argomento un oggetto JSON che consente di controllare il comportamento del plugin. Nell’esempio, si utilizza la classe .box per selezionare gli elementi che rappresentano le schermate da mostrare durante lo scorrimento.

Un effetto simile a quello di jQuery Scrollify si può ottenere con PagePiling, altro plugin di jQuery.

JQuery Scrollify consente di controllare la presenza della barra di scorrimento, l’andamento dell’effetto durante lo scorrimento e molte altre opzioni che sono documentate nel sito ufficiale del plugin che contiene anche numerose demo ed esempi pratici.