jQuery Parallax Header

jQuery Parallax Header

Leggiamo da Wikipedia: il parallasse (dal greco παράλλαξις, paràllaxis: “accavallamento“) è il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione. Possiamo riprodurre questo effetto con jQuery per creare un header interattivo, attivato al passaggio del mouse durante il RollOver.

Procediamo procurando anzitutto le 4 immagini dell’header: possiamo utilizzare quelle nel download alla fine dell’articolo, nel pacchetto .zip, cartella images. Se puntiamo ad immagini vettoriali, possiamo trovarne di altre nei seguenti siti:

Freevectordownload

Vectorportal

Vectorjungle

Vectorjunky

Vecteezy

Possiamo utilizzare altre immagini .png, purchè abbiano dimensioni idonee al progetto.
Iniziamo incollando nell’<head> del file Index.html (opportunamente creato nel nostro editor preferito) il collegamento ai files javascript:

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
 <script type="text/javascript" src="js/jquery.event.frame.js"></script>

Scarichiamo i files javascript dai seguenti link:

eventframe
jquery.jparallax.min.js 
jquery-1.6.4.min.js

Copiamoli nella cartella js, creata nella main directory del sito. Procediamo incollando il seguente html nel <body> dell’index:

<div id="parallax" class="clear">
     <div class="parallax-layer" style="width:1200px; height:250px;">
         <img src="images/grass.png" />
     </div>
     <div class="parallax-layer" style="width:500px; height:250px;">
         <img src="images/frog2.png" />
     </div>
    <div class="parallax-layer" style="width:1200px; height:300px;">
         <img src="images/butterflies3.png" />
    </div>
 </div>

Copiamo ora nell’<head> l’html necessario per attivare il plugin del parallasse:

<script type="text/javascript">
 jQuery(document).ready(function()
 {
     $('#parallax .parallax-layer')
     .parallax({
         mouseport: $('#parallax')
     });
 });
 </script>

Nel file styles.css, opportunamente creato nella cartella css, incolliamo le classi e gli id necessari:

#parallax {
 position:relative; overflow:hidden; width:950px; height:250px;
 background-image:url('background.jpg');
 }
 .parallax-viewport {
 position: relative; /* relative, absolute, fixed */
 overflow: hidden;
 }
 .parallax-layer {
 position: absolute;
 }

Finito! Rimodelliamo il sito secondo le nostre esigenze, e avremo un originale header animato da esibire agli utenti del nostro sito.

Fonte

Di seguito, vi proponiamo altri tipi di parallasse jQuery, qualora voleste approfondire l’argomento.

Css jquery animated parallax bokeh effect

Jquery Image Parallax 

Motionparallax

Parallax scrolling example

Ericj 

Parallax demos stalkbuttons

Parallax

Alla prossima!

Condividi Articolo

Autore

Magoo

Web Designer da lungo tempo. La mia e' una passione che sembra non avere mai fine. Ho lavorato per molti anni come Web Designer e Digital Artist per alcune agenzie pubblicitarie, per poi prendere la decisione di mettermi in proprio. Amo l'elaborazione 3D, il Flat Design, il Concept Design e non disdegno creare pagine web, piattaforme e portali di ogni genere. Vivo di Web & Creatività quindi mi reputo fortunato!

Vedi tutti gli articoli di Magoo

COMMENTA

Loading Facebook Comments ...
Loading Disqus Comments ...

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>