ESTHÉTIQUE
SIMPLICITÉ
EFFICACITÉ

Aneartiste sur deviantartAneartiste sur twitter Aneartiste sur scoop-it

Effet de parallaxe (sans jQuery)

Du mouvement en perspective

Le défilement parallaxe (parallax scrolling en anglais) s'illustre par le déplacement à des allure variables de plusieurs calques de décors. Il s'agit en fait de l'adaptation d'une technique très utilisée pour les dessins animés, qui consiste à faire défiler des celluloïds à des vitesses différentes. Le calque le plus éloigné de l'observateur (l'arrière-plan) est celui qui se délace le plus lentement. Plus on remonte vers l'avant-plan et plus la vitesse de défilement augmente induisant un effet de profondeur et de mouvement en 3 dimensions. On parle dans ce cas de "perspective de mouvement".

gif exemple d'animation,image Giferimage Gifer

« Le temps est une invention du mouvement. »
—Amélie Nothomb

Il existe trois types de défilement : horizontal, vertical, ou multidirectionnel. Dans ce script, j'ai mis en œuvre un systême de défilement horizontal, mais il sera très simple de le modifier pour l'adapter à des besoins spécifiques comme on le constatera par la suite. En HTML5, il existe un procédé permettant de superposer plusieurs calques. Le CSS3 permet d'ajouter plusieurs images d'arrière-plan pour un élément 'div', via la propriété 'background-image'. Dans ce cas, les instructions correspondantes aux différentes images d'arrière-plan sont séparées par des virgules et empilées les unes sur les autres, la première image d'entre elles la plus proche du spectateur.


#exemple {
background: url(images/foreground.gif) right bottom no-repeat,
url(images/middleground.gif) left top no-repeat,
url(images/background.gif) center center no-repeat;
}

Malheureusement, la possibilité de les animer ensuite s'avérerait relativement complexe. Il existe un autre moyen consistant à empiler des 'div' successives en position 'absolute', chacune étant habillée d'une image propre correspondant à sa position dans la profondeur du panorama. Au niveau du code HTML, nous trouverons donc trois éléments nommés successivement 'foreground', 'middleground' et 'background' accompagnées, dans le CSS, d'une profondeur 'z-index' appropriée et éventuellement d'un effet de flou pour augmenter l'effet perspectif. Dans ce contexte, l'animation se règlera en fonction des mouvement du curseur. On usera en conséquence d'un détecteur d'évènement en javascript pour relever la coordonnée 'x' du curseur au-dessus du conteneur puis, une seconde fonction se chargera de convertir cette donnée pour l'appliquer aux positions des différentes images avec une variabilité proportionnelle.

Pour calculer les positions des éléments dans cette fenêtre, on effectue un calcul en deux étapes. la première consiste à multiplier 'x' par un coefficient de déplacement propre à chacun des plans, nommés 'strength1', 'strength2' et 'strength3'. Puis, dans un second temps et afin de centrer les déplacements, nous soustrayons cette valeur de la moitié de la largeur du conteneur si 'x' est situé dans la moitié droite du plan, ou au contraire, nous l'y ajoutons si 'x' occupe la moitié gauche. La fonction javascript donne ceci :


function animate(x){
let lc = 600; /* largeur conteneur */
let strength1 = .3;
let strength2 = .5;
let strength3 = .7;
let BG = document.querySelector('#background');
let MG = document.querySelector('#middleground');
let FG = document.querySelector('#foreground');
let X1 = x*strength3;
let X2 = x*strength2;
let X3 = x*strength1;
if(x<(lc/2)) {
newX1 = lc-(X1+lc/2)-30; FG.style.backgroundPosition = newX1+"px "+"95px";
newX2 = lc-(X2+lc/2)-50; MG.style.backgroundPosition = newX2+"px "+"70px";
newX3 = lc-(X3+lc/2)-200; BG.style.backgroundPosition = newX3+"px "+"10px";
} else {
newX1 = (lc/2-X1)-30; FG.style.backgroundPosition = newX1+"px "+"95px";
newX2 = (lc/2-X2)-50; MG.style.backgroundPosition = newX2+"px "+"70px";
newX3 = (lc/2-X3)-200; BG.style.backgroundPosition = newX3+"px "+"10px";
};
};

Si l'on désire adapter le code ci-dessus pour le coupler à un scrolling vertical, les calculs seront plus simples. On positionnera un détecteur d'évènement 'onscroll', puis on appliquera les calculs en fonction de la coordonnée 'y'. Il suffit, dans ce cas, de se limiter à la première étape puisque le recentrage des déplacements est inutile. L'archive complète et fonctionnelle est à télécharger à partir de ce lien. Elle ne fait appel à aucune bibliothèque (jQuery ou autres) et ne pèse que 8,5 ko images comprises.

publié le 05/02/2022, à 08h27 par Frédéric Schäfer

Précédentsuivant