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:
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
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