lo sfondo che si sposta al muoversi del mouse

Uno dei primi siti che mi ha ispirato è quello di Edan Kwan http://www.edankwan.com/.
Questo sito, una volta passata la pagina di caricamento(abbastanza pesante), conduce alla pagina principale dove, tra i tanti effetti spettacolari che ostenta, ha lo sfondo che si sposta al muoversi del mouse.

la main page di http://www.edankwan.com/ (17 Giugno 2011)

Pensi che si possa fare lo stesso effetto utilizzando HTML + javascript + CSS?


Ci sono probabilmente mille possibili soluzioni, io ne ho trovato una.
Probabilmente non è la migliore: si accettano idee, proposte, confronti :-)

Per replicare l'effetto sfondo della pagina che si muove con il mouse si può ricorrere a bgFlow, un semplice plugin di jQuery. Purtroppo gli sviluppi sono fermi ma l'autore invita comunque a mettere mano al codice sorgente.
Il tutto ha inizio con lo script che viene eseguito al caricamento della pagina

$(document).ready(function(){
    $('.flow').bgFlow({
        image: 'img/bg.jpg'
    });
});

questo richiama il plugin passando come parametro il path all'immagine da utilizzare come sfondo. Vedi la demo.
Nella demo la velocità di movimento dell'immagine è superiore alla velocità desiderata. Per ottenere l'effetto voluto ho apportato qualche piccola modifica riutilizzando infatti il parametro "speed" già presente posso passare al plugin, oltre all'immagine di sfondo, la velocità che voglio ottenere con un valore che può andare da 0(più lento) a 10. Con velocità 3 il risultato si avvicina abbastanza a quello che voglio.

$(document).ready(function(){
    $('.flow').bgFlow({
        image: 'img/bg.jpg',
        speed: 3
    });
});

Jparallax + bgflow

Un altro plugin JQuery che permette di fare un effetto simile è jparallax di cui potete trovare un tutorial oltre alla documentazione ufficiale.

Jparallax è sicuramente più completo e permette di applicare l'effetto parallasse (il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione) anche alle immagini poste tra lo sfondo e l'occhio del visitatore come in questo caso dove sono stati applicati entrambi i plugin, bgflow per lo sfondo e jparallax per superman in primo piano.

Vedi la demo finale.