Tutorial – Effetto Parallax verticale di immagini a tutto schermo

In questo tutorial  vediamo come realizzare un effetto di parallax verticale applicato a immagini a tutto schermo.

DEMODOWNLOAD

Script utilizzati:

-   Supersized – Lo uso per impostare le immagini a tutto schermo

-   Stellar – Lo uso per gestire l’effetto della parallax

Importiamoli nell’header della pagina:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.stellar.js"></script>
<script type="text/javascript" src="supersized.1.0.js"></script> 

HTML

Iniziamo dall’html: ho diviso la pagina in tre sezioni più il menu che ci permetterà di scorrere tra le sezioni.

<ul id="menu">
   <li><a href="#sez1" class="link_scroll" >Sezione uno</a></li>
   <li><a href="#sez2" class="link_scroll" >Sezione due</a></li>
   <li><a href="#sez3" class="link_scroll" >Sezione tre</a></li>
</ul>
 
<div class="sez" id="sez1">
   <div class="footer"><h1>Questa è la sezione uno.</h1></div>
</div>
 
<div class="sez" id="sez2">
   <div class="footer"><h1>Questa è la sezione due.</h1></div>
</div>
 
<div class="sez" id="sez3">
   <div class="footer"><h1>Questa è la sezione tre.</h1></div>
</div>

CSS 

Nel foglio di stile ho impostato le proprietà basilari, ho impostato lo sfondo per ogni sezione, impostato a fixed il menu per averlo sempre in alto a sinistra indipendentemente dallo scrolling e ho definito le caratteristiche principali della classe size. Notate che non ho definito le dimensioni di questa classe, che faremo gestire dinamicamente a jQuery.

html,body{
padding: 0;
margin: 0;
}
#sez1{
background: url('img1.jpg') no-repeat center center fixed;
}
#sez2{
background: url('img2.jpg') no-repeat center center fixed;
}
#sez3{
background: url('img3.jpg') no-repeat center center fixed;
}
.sez{
float:left;
position: relative;
}
#menu{
position: fixed;
z-index: 999;
}

JQUERY

Eccoci al codice jQuery, il cuore del tutorial.

Per prima cosa ho gestito le dimensioni delle sezioni, che saranno pari a quelle della finestra, poi ho creato una funzione che prevenisse il ridimensionamento della finestra, in modo da avere sempre le giuste dimensione delle sezioni, e infine ho usato lo script supersized.js per gestire gli sfondi. A questo ho passato unicamente le dimensioni delle immagini per permettergli di mantenere il corretto rapporto senza perdere qualità.

var larghezza_finestra = $(window).width();
var altezza_finestra = $(window).height();
  
// le sezioni hanno tutte la larghezza e altezza della finestra
$('.sez').width(larghezza_finestra);
$('.sez').height(altezza_finestra);  
  
$(window).resize(function()
{
      var larghezza_finestra = $(window).width();
      var altezza_finestra = $(window).height();
     
      // le sezioni hanno tutte la larghezza e altezza della finestra
      $('.sez').width(larghezza_finestra);
      $('.sez').height(altezza_finestra);  
});  
  
$(function(){ 
      $.fn.supersized.options = { 
         startwidth: 1600, 
         startheight: 1200,  
      }; 
      $('#sez1').supersized(); 
      $('#sez2').supersized(); 
      $('#sez3').supersized(); 
});

A questo punto ho applicato lo script stellar.js per applicare l’effetto di parallax.

$(function(){
      $('.sez').stellar();
});

Infine ho creato una funzione per il menu che è richiamata nel momento in cui un link viene premuto. La funzione estrae l’href  che contiene l’id del blocco verso cui la pagina si sposterà e richiama la funzione animate, che eseguirà lo scrolling in un tempo che ho impostato a 2 secondi. Accanto al tempo è possibile anche inserire una funzione di easing, in modo da rendere ancora più originale l’effetto.

$('.link_scroll').click(function(e)
{
e.preventDefault();
      // estraggo link
      var attr = $(this).attr('href');
      // scroll verso attr
      $('html, body').stop().animate({ scrollTop: $( attr ).offset().top }, 2000);
});

Hai trovato interessante l’articolo? Commenta per far sapere a tutti cosa ne pensi