JavaScript: parallax scrolling con l'evento mousewheel

In questo demo ho ricreato uno scroll in parallasse utilizzando solo JavaScript e un evento specifico del mouse.

Animare lo scrolling della pagina è possibile ma non è preciso in modo assoluto, così ho preferito usare le transizioni e le trasformazioni CSS. L'evento mousewheel ha lo svantaggio di venire innescato più volte ad ogni singolo movimento della rotellina del mouse, quindi occorre creare un ritardo con cui viene applicato l'effetto di scroll principale usando un timer JavaScript. La durata del timer deve essere uguale alla durata dell'animazione principale.

Demo e codice

Pure JavaScript parallax scrolling with mousewheel

Torna su