jParallax è un plugin sviluppato con 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.
Per utilizzare il plugin bisognerà scaricare il file js e scrivere una semplice lista utilizzando i tag <ul> con id parallax e <li> creando diversi livelli di piani in cui inserire delle immagini.
Queste immagini grazie al plugin jParallax verranno trasformate in un panorama 3D con profondità
Ecco un esempio di codice:
<ul id="parallax">
<li></li>
<li></li>
</ul>
Esempi con jParallax
- webdev.stephband.info/parallax_demos.html
- test.stephband.info/parallax_0.6/test.html
- test.stephband.info/parallax_0.6/map.html
- test.stephband.info/parallax_0.5/climber.html
Sul sito avremo a disposizione diversi demo da visualizzare e una vasta documentazione per utilizzare il plugin
13 Commenti
Interessante, ma non so in che occasione potrebbe tornare utile uno script di questo genere…
Esiste qualcosa del genere anche in Flash?
Che forte!
Hem si ma a cosa serve?
Robba serissima!
@Guido ciao ho visto qualcosa a riguardo vedo di trovare un bel esempio
@Silvia ciao,
Con questo script puoi creare degli effetti ottici con più piani di livello…
Forse non sarà un elemento usato spesso ma sicuramente di grande impatto visivo
Non male, peccato che sfrutti il 100% della CPU a fare questa cosette con Javascript!
Grandissimo,
mi ricordo di averti chiesto un tutorial su qlc del genere in flash e avevi detto che ci avresti lavorato. Anche se non è in flash sei sempre troppo avanti. :)
Grazie
Sarà anche vero che non è indispensabile per un sito, però provate a guardare dezignus.com, che lo usa. E’ stu-pen-do!
jParallax dev by:stephband.info (‘problem when resizing window if travel set in ‘px’) Here the fixed version with the original license http://www.h2osoft.it/jquery.jparallax.js
Ho fatto un fix che per la mia necessità va bene(anche quando ridimensiono il browser e ho dato i valori in PX nn impazzisce)
Non appena mi risponde stephband gli mando il fix e deciderà se pubblicarlo
miiii fighissimo, se si riuscisse ad avere qualcosa del genere in flash potrebbe darmi la possibilitá di grare dei giochini, mi ricordo i primi platform con tre o quattro parallassi…mi fecero venire nelle mutande!
Ho approfondito per bene questo argomento, visto che mi interessava questo effetto, ho quindi creato una guida su come ricreare l’effetto parallasse di Nike Better World, se vi può interessare questo è il link all’articolo: http://www.brick-instructions.it/2012/04/06/tutorial-per-il-parallax-scrolling-effetto-parallasse/
Il tutorial è bello lungo ma credo di essere stato abbastanza chiaro! ^^
ma sei proprio un genio!! Avevamo proprio bisogno di un altro articolo copiaincollato dalla rete che non dice niente di nuovo…