Favicon BulgaWeb

Effet parallax avec parallax JS

Mis à jour le mardi 19 avril 2022
Temps approximatif de lecture : 1 minute

Suite à une demande sur le groupe anglophone Oxygen, j'ai réalisé l'effet demandé grâce à Parallax.js.

Afin de réaliser cet effet c'est assez simple. Dans un premier temps ajouter le CDN de parallax.js, votre structure devra avoir une div dont l'ID va être changée en "scene" (sans les apostrophes) et les div utilisées pour les couches auront la classe "layer".

Au niveau du css nous aurons ceci (attention de bien mettre votre section en relative) :

#scene, .layer {
	position: absolute;
	top: 0;
	left: 0;
}

Au niveau du javascript

var scene = document.getElementById('scene');
	var parallax = new Parallax(scene);

Pour avoir un mouvement, il faudra ajouter un data attribute sur vos div de couches (layer) avec une data-depth entre 0 et 1 (donc la profondeur ou la valeur de votre effet sur la couche). Une valeur identique à chaque couche, évidemment, ne permettra pas de voir de différence dans l'effet.

Vous pouvez également aller plus loin avec des options en allant voir le github du js.

Bon amusement, la démo est ici !

Suite à la monétisation des mes postes sur un site externe (https://oxyhowto.com/more_hows-categories/french/) sans mon autorisation, les postes sont uniquement visibles avec un compte.
Copyright © 2019 - 2022 Bulgaweb
 | 
Développé par BulgaWeb
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram