sabato 29 novembre 2008

jParallax: effetto parallasse di grande impatto con jQuery

L'altro giorno sono capitata su uno dei miei siti preferiti, Dezignus.com, e ho notato un effetto veramente carino nell'header. In pratica, spostandosi a destra e a sinistra con il mouse, le immagini dell'header, sovrapposte e trasparenti, si muovevano in modo indipendente.
Ho subito pensato che si trattasse di Ajax, e così è!

Si tratta del plugin jParallax, sviluppato per il framework jQuery che permette di creare un effetto Parallasse (Parallax) tra immagini.
La parallasse è il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione, e il punto di osservazione nel nostro caso è la posizione del puntatore del mouse.

Per utilizzare questo plugin nel nostro sito dobbiamo innanzitutto scaricare il file js, dopodichè è sufficiente inserire nella nostra pagina un elemento con con id parallax e al suo interno inserire le immagini con cui vogliamo creare i diversi "piani" della composizione. Naturalmente l'effetto è migliore se utilizziamo delle png, che mantegono un'ottima trasparenza.

Esempio di codice:

<div id="parallax">
<img src="head_1-trans.png" alt="" style="width:1110px; height:224px;">
<img src="head_2-trans.png" alt="" style="width:1020px; height:224px;">
<img src="head_3-trans.png" alt="" style="width:1140px; height:224px;">
<img src="head_4-trans.png" alt="" style="width:1180px; height:224px;">
</div>

Sul sito ufficiale è possibile trovare molti esempi e una documentazione dettagliata.

VAI AL SITO UFFICIALE

2 commenti:

Marco ha detto...

un esempio molto originale di Parallasse è sul sito dell'icona delle gothic lolita italiene, carmilla, vi invito a vederlo perchè è molto curioso: http://www.rossocarmilla.com

Marco Nalon ha detto...

jParallax è veramente carino, permette di creare una finta tridimensionalità, ma non è ajax!

Ajax è un sistema di javascript che permette di interfacciarsi con una pagina lato server.

Jparallax non centra nulla con ajax, rimane tutto lato client!
Cerchiamo di non confondere i lettori

Posta un commento