Jparallax è un plugin realizzato con framework jQuery che dà la possibilità di creare l’effetto parallasse sul nostro sito.

Cosa è l’effetto parallasse?

E’ quel fenomeno in cui un oggetto sembra spostarsi rispetto allo sfondo, se cambia il punto di osservazione che potrà essere il posizionamento o lo scroll del mouse oppure semplicemente indotto da pulsanti di scorrimento.

Quindi a seconda delle dimensioni dei livelli di oggetti, avremo un movimento in velocità diverse, caratteristico dell’effetto parallasse.

Come Utilizzarlo

Si inizia con un semplice codice HTML a lista con un ID “parallax”assegnato al contenitore <ul> e all’interno dei <li> le varie immagini che diventeranno i nostri livelli.(Ovviamente l’effetto sarà migliore utilizzando delle immagini png con trasparenza).<ul id=”parallax”><li><img src=”sfondo_1-trans.png” alt=”” style=”width:1000px; height:220px;”></li>
<li><img src=”sfondo_2-trans.png” alt=”” style=”width:1000px; height:220px;”></li>

<li><img src=”sfondo_3-trans.png” alt=”” style=”width:1000px; height:220px;”></li>

</ul>
Per utilizzare l’effetto basterà poi scaricare il file jsda qui:stephband.info/jparallax/e includerlo nella pagina, assieme naturalmente al framework jquery:<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”jquery.jparallax.js”></script>
Utilizzare al meglio i CSSper personalizzare questo effetto e avere risultati ancora più originali.Le regole CSS fondamentali sono:- dare al #parallax position:relative o absolute e le dimensioni.
– dare dimensioni anche ad ogni elemento che farà parte dell’effetto; questo determinerà la velocità di scorrimento.

Più alto sarà il valore, più veloce sarà lo scorrimento.
Infine si dovrà applicare lo script jparallaxal contenitore con id #parallax in questo modo:jQuery(document).ready(function(){ jQuery(‘#parallax’).jparallax({}); });