Parallax

Aller en bas

Le défilement parallaxe (ou scrolling différentiel) est une technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.

Cet effet consiste à superposer plusieurs calques et les faire défiler à des vitesses différentes.

HTML

Pour réaliser cet effet, il faut englober la page avec autant de <div> que de calques d'arrière-plan.

<body>
    <div id="nuages">
        <div id="montagnes">
            <div id="arbres">
                <div id="bonhomme">

                    <!-- Contenu -->

                </div>
            </div>
        </div>
    </div>
</body>

CSS

Les images d'arrière-plan doivent être fixes. (background-attachment:fixed;)

#nuages{background:#cccccc url(images/nuages.png) 50% top repeat-x fixed;}
#montagnes{background:url(images/montagnes.png) 50% top repeat-x fixed;}
#arbres{background:url(images/arbres.png) 50% top repeat-x fixed;}
#bonhomme{background:url(images/bonhomme.png) 50% top no-repeat fixed;}

Javascript

Le code suivant est écrit en jQuery :

function getWindowHeight() {
    var windowHeight=0;
    if (typeof(window.innerHeight)=='number') {
        windowHeight=window.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body && document.body.clientHeight) {
                windowHeight=document.body.clientHeight;
            }
        }
    }
    return windowHeight;
}
						
function parallax(){
    scrollTopCur = $(document).scrollTop(); // distance par rapport au haut du document
    heightCur = $(document).height();       // hauteur du document 
    windowHeight = getWindowHeight();       // hauteur "utile" de la fenêtre

    $('#nuages').css(
        "background-position",
        "50% " +
        Math.round(windowHeight - 700 - (scrollTopCur + windowHeight - heightCur) / 8)
        + "px"
    );
    $('#montagnes').css(
        "background-position",
        "50% " +
        Math.round(windowHeight - 570 - (scrollTopCur + windowHeight - heightCur) / 4)
        + "px"
    );
    $('#arbres').css(
        "background-position", 
        "50% " + 
        Math.round(windowHeight - 500 - (scrollTopCur + windowHeight - heightCur) / 2) 
        + "px"
    );
    $('#bonhomme').css(
        "background-position", 
        "50% " + 
        Math.round(windowHeight - 350 - (scrollTopCur + windowHeight - heightCur) / 1.5) 
        + "px"
    );
}

$(function(){
    parallax();                     // calcul au chargement de la page
    $(window).scroll(parallax);     // calcul au défilement de la page
    $(window).resize(parallax);     // calcul au redimensionnement de la page
});

Le nombre à la fin de la division correspond à la vitesse de défilement du calque par rapport à la page : 8 fois moins vite, 4 fois moins vite...

Aller en haut