PagePiling.js crea un’interessante effetto di scorrimento quando viene attivato un link interno o quando si scorre la pagina con la rotellina del mouse. Questo plugin di jQuery è compatibile con tutti i browser moderni (anche con Internet Explorer 8 e successivi) ed è rilasciato con licenza MIT.

PagePiling.js: un nuovo modo di scorrere la pagina

PagePiling.js: un nuovo modo di scorrere la pagina

 

Usare pagePiling.js

Inserire un elemento con id #pagepiling che dovrebbe contenere tutti i contenuti della pagina organizzati in sezioni, nell’esempio una serie di elementi div.

<div id="pagepiling">
  <div class="section" id="s1">
    <!-- Contenuto sezione 1 ... -->
  </div>
  <div class="section" id="s2">
    <!-- Contenuto sezione 2 ... -->
  </div>
  <div class="section" id="s3">
    <!-- Contenuto sezione 3 ... -->
  </div>
</div>

Scaricare una copia di jQuery e di PagePiling.js dal sito ufficiale. Includere nell’intestazione del documento il foglio di stile del plugin.

<link rel="stylesheet" type="text/css" href="css/jquery.pagepiling.css">
<style>
 /* Stili personalizzati */
</style>
</head>

Includere alla fine del documento jQuery e del plugin seguiti dallo script jQuery che seleziona l’elemento #pagepiling e attiva il plugin.

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#pagepiling').pagepiling({
    anchors: ['s1', 's2', 's3'],
    sectionsColor: ['#0373A3', '#029E72', '#B56804'],
    navigation: {
      'position': 'right',
      'tooltips': ['Sezione 1', 'Sezione 2', 'Sezione 3']
    }
  });
});
</script> 
</body>
</html>

Nell’esempio sono state utilizzate le seguenti opzioni:

  • anchors: le ancore delle varie sezioni tra cui spostarsi
  • sectionColor: i colori di ciascuna sezione
  • navigation: la posizione del sistema di navigazione predefinito del plugin e le etichette da utilizzare per ciascuna sezione

Visualizza la demo

La lista delle opzioni è disponibile nella documentazione ufficiale del plugin.