Richiesta suggerimenti su come ottenere un effetto parallasse

[Ania81]

Salve,

capisco che il titolo è quanto mai vago, ma è difficile essere più specifici.
Avrei bisogno di ottenere un effetto come quello che si vede in questo sito

http://thehitlistofficial.com/index.html

dove i personaggi sono immagini ritagliate che si muovono sullo sfondo seguendo il movimento del mouse.
Non ho sinceramente idea se sia possibile ottenere qualcosa del genere facendo solo ricorso ai css, o se serva magari qualche js.

Chiedo delucidazioni e suggerimenti, ovviamente non spero che mi tiriate fuori un codice già pronto, ma almeno sapere dove andare a cercare e soprattutto cosa!

Purtroppo gestisco il sito della mia associazione solo per passione, dotata di tanta ignoranza ma anche di tanta buona volontà...

Grazie a chi vorrà illuminarmi!

[piesse78]

solo col css non si può.

ovviamente devi cercare come recuperare le coordinate del mouse in Javascript.

in base a quelle, con un po' di matematica sempre in JS devi calcolare uno "spostamento" (offset) delle immagini dei personaggi rispetto alla loro posizione predefinita.

e infine, sempre via JS, all'interno di un evento mouseMove (che viene richiamato ogni volta che il mouse si muove all'interno della pagina) aggiorni gli stili CSS delle suddette immagini, che dovranno naturalmente essere posizionate in maniera assoluta in modo da avere piena libertà per quanto riguarda il controllo della loro posizione.

[Ania81]

Temevo una cosa del genere...

Grazie mille della spiegazione. Mi sa che non sarà facile, data la mia ignoranza in materia, ma almeno ho un punto di partenza!

[KillerWorm]

Ciao,
oltre a quanto ti è già stato indicato, aggiungo che si tratta di un effetto generalmente detto "parallasse" (in inglese: "parallax") o anche "scrolling parallasse". Per realizzare qualcosa del genere, in modo relativamente semplice, puoi usare jQuery. Se fai qualche ricerca troverai sicuramente dei plugins che fanno al caso. Ovviamente sarebbe opportuno avere un minimo di conoscenza di jQuery nonché di JavaScript.

[Ania81]

Infinitamente grazie! Mi hai aperto un mondo! In effetti ho trovato parecchio materiale già con una brevissima ricerca in rete. Con basi come quelle che si trovano su internet con tanto di codice commentato non dovrei avere grossissimi problemi. Ho fatto funzionare di peggio!

Grazie!!!