Come creare un sito a navigazione (scroll) verticale con jQuery

Oggi vediamo come creare un sito a navigazione (scroll)  verticale,usando jQuery. Un tutorial molto utile, tra i tanti presenti in rete per ricreare questo bellissimo effetto di scrolling verticale.

Le librerie necessarie

Per prima cosa includiamo nel nostro documento le librerie necessarie a far “scorrere” la pagina:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="javascripts/animazioni.js"></script>
<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>

Ecco alcune precisazioni:

Tralasciando la prima libreria (quella jQuery), ho usato:

A) Le librerie Scroll-To, molto facili ed essenziali, gestiranno la fase di scrolling.

B) Le librerie easing permettono di effettuare animazioni specifiche nel corso dello scroll.

C) Il file animazioni.js conterrà il nostro script di scroll.

Ecco dove reperire le librerie necessarie:

ScrollTo Download >>

jQuery Easing >>

Lo scheletro HTML

Vediamo come creare il nostro html, attenetevi a questa sintassi:

Creazione del menù di navigazione:

<ul id="nav">

  <li class="contatti"><a href="javascript:void(0)">Contatti</a></li>
  <li class="inizio"><a href="javascript:void(0)">Home</a></li>

</ul>

Il comando javascript void(0) inibisce l’effetto “ancora” (torna su) tipico del browser.

Ecco invece la struttura dei div che accoglieranno il nostro contenuto:

<section id="inizio">
<p>TUO TESTO</p>
</section>

<section id="contatti">
<p>TUO TESTO</p>
</section>

Ovviamente cercate di “spaziare” con un padding i due ( o più) contenitori per rendere la pagina abbastanza lunga da ricreare l’effetto.

Motore dello scroll animato verticale

Veniamo al vero cuore pulsante del progetto: animazioni.js

File animazioni.js

$(document).ready(function() {

  $(".inizio").click(
      function(){
         $.scrollTo( '#inizio', 1000, {easing:'easeOutBounce'} );
  });

  $(".contatti").click(
      function(){
         $.scrollTo( '#contatti', 1000, {easing:'easeOutBounce'} );
  });

});//FINE DOM

Come vedete il funzionamento è molto semplice:

Una volta aperto il DOM facciamo in modo che al click dell’utente sul nostro menù la pagina effettui uno scroll fino al div indicato (#inizio o #contatti), con un timing di animazione pari a 1000, e con easing easeOutBounce. I parametri di easing da usare sono innumerevoli, clicca qui per vederne alcuni.

Ricapitolando possiamo sintetizzare la sintassi generale in questo modo:

$.scrollTo( '#div_da_caricare', tempo esecuzione, {easing:'tipo_easing'} );

Ovviamente questo articolo vuole essere un punto di partenza, dato che esistono altri modi per effettuare scroll o animazioni ma può essere un ottimo modo per sviluppare landing page o piccoli siti web in modo veloce e pratico.

 Ti è piaciuto l’articolo? Commenta e condividi!