Effet parallax avec parallax JS

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 !