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:
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:
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:
Copiamo ora nell’<head> l’html necessario per attivare il plugin del parallasse:
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!
![Dota Reborn update: risolto grave driver Linux [Changelog]](https://m2.paperblog.com/i/289/2891848/dota-2-reborn-update-risolto-grave-bug-per-dr-L-AwIGUZ-175x130.jpeg)
Pacman
Nostradamus
Magical Cat Adventure
Snake