Parallasse: un moderno effetto in Javascript

Uno dei migliori effetti moderni che si vedono molto sui siti più recenti è l'effetto parallasse. Consiste nel movimento di scrolling più lento degli sfondi rispetto alla pagina. Questo piccolo accorgimento fa sì che un oggetto sembra spostarsi rispetto allo sfondo creando l'illusione di cambiare punto di osservazione anche se si è fermi immobili davanti lo schermo. Per essere più chiari un sito con il parallasse potrebbe essere: www.spotify.com

Ma vediamo nel dettaglio come si fa un effetto del genere molto semplice: abbiamo una funzione chiamata Parallax() che muove lo sfondo cambiando l'attributo backgroundPosition e una che serve a calcolare la posizione del backgroundPosition chiamata movePos.

Innanzitutto fissiamo le variabili jQuery dei div che devono eseguire il parallax:

var $window = $(window);
var $one = $('#section1');
var $two = $('#section2');
var $three = $('#section3');
var $four = $('#section4');
var $five = $('#section5');

Ora implementiamo le funzioni effettive del parallasse (la classe inview ha la visibility su visible):

var windowHeight = $window.height();

function movePos(x, windowHeight, pos, offset, speed){
        return x + "% " + (-((windowHeight + pos) - offset) * speed)  + "px";
    }
    
function Parallax(){
        var pos = $window.scrollTop();
        if($one.hasClass("inview")){
            $one.css({'backgroundPosition': movePos(50, windowHeight, pos, 600, 0.3)});
        }
        if($two.hasClass("inview")){
            $two.css({'backgroundPosition': movePos(50, windowHeight, pos, 1450, 0.2)});
        }
        if($three.hasClass("inview")){
            $three.css({'backgroundPosition': movePos(50, windowHeight, pos, 2850, 0.3)});
        }
        
        if($four.hasClass("inview")){
            $four.css({'backgroundPosition': movePos(0, windowHeight, pos, 3200, 0.15) + ", " + movePos(50, windowHeight, pos, 0, 0.7) + ", " + movePos(50, windowHeight, pos, 0, 0.5) + ", " + movePos(50, windowHeight, pos, 3700, 0.3)});
        }
        if($five.hasClass("inview")){
            $five.css({'backgroundPosition': movePos(50, windowHeight, pos, 4900, 0.3) + ", " + movePos(50, windowHeight, pos, 0, 0.7) + ", " + movePos(50, windowHeight, pos, 0, 0.5) + ", " + movePos(50, windowHeight, pos, 3700, 0.3)});
        }
        
}