Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Faire un effet parallaxe en Javascript

Par Mathieu ROSSETTO Publié le 20/10/2018 à 18:34:46 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Javascript est un langage de programmation qui permet, entre autres, de faire des animations et de manipuler le DOM de la page HTML.

Ce tutoriel va vous monter comment faire un effet parallaxe sur votre site Internet, par exemple dans le header de votre site ou dans le fond de la page (à vous de voir).

Principe

L’effet Parallaxe consiste à faire défiler 2 couches d’images superposées, l’une plus rapidement que l’autre, et dans le même sens, lors du scroll sur une page web.

Par exemple, voici des exemples de jeux vidéo utilisant l’effet parallaxe. (Cets effets sont très utilisé dans les jeux de plateforme).

Rayman (1995)

Lorsque vous faites avancer le personnage, il reste au milieu de l’écran et l’avant plan (les différentes plateformes) se déplacent plus rapidement que le fond du décor (qui se déplacement plus lentement).

En résumé, voilà ce qu'il se passe

Fonctionnement

Pour faire un effet Parallaxe en JS, on va utiliser plusieurs instructions qui permettent de manipuler le DOM.

window.pageYoffset;

Permet de détecter la position de la barre de défilement dans le navigateur internet par rapport au haut de la page.

document.querySelector("#myDiv").style.backgroundPosition="0px " + ypos + "px"; 

Permet de modifier la valeur de la position du fond de la div en question.

L'algorithme est le suivant: On détecte la position du défilement de la page grâce à la variable pageYOffset, puis on met la position du background de la div égale à la valeur de pageYOffset multiplié par une vitesse (au choix). Plus la vitesse sera grande, plus le background de la div va se déplacer vite

Ensuite, on n’a plus qu’à faire une fonction qui traite tout cela dans un document.onscroll.

Exemple

Dans cet exemple, on va déplacer le background-image d'une div (une image à télécharger ci-dessous) à une vitesse au choix par rapport au défilement de la page.

Prenons cette image en exemple (clic droit > enregistrer sous > "image.jpg")

Le code HTML (index.html)


<html>
    <head>
        <title>Exemple fonctionnement effet parallaxe</title>
        <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <div id="myDiv"></div>
            <script src="app.js"></script>
        </body>
</html>

Le code CSS (style.css)

body {
    height: 3000px;
}
  
#myDiv {
    position:fixed;
    background-position: 0px 0px;
    background-image: url("image.jpg");
    background-size: 120%;
    width:700px;
    height:200px;
}

Le code Javascript (app.js)

var ypos = 0;
var positionScroll;
var vitesse = 0.1; //Changer la valeur par la vitesse de défilement souhaitée

window.onload = function () {
    document.onscroll = function() {
    positionScroll = window.pageYOffset;
    ypos = positionScroll *= -vitesse;
    document.querySelector("#myDiv").style.backgroundPosition="0px " + ypos + "px"; 
    }
}

Dans cet exemple, vous avez vu comment régler la vitesse de défilement d'une image de fond d'une div par rapport au défilement de la page. Vous pouvez créer autant de parallaxe que vous le souhaitez dans des div ou bien sur le fond de la page.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels