I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

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

image1

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)});
        }
        
}

I più letti

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento