Vos propres effets de parallaxe avec parallax.js

Vous êtes tombé sur un site avec un bel effet de parallaxe ? Ça vous donne des idées et vous souhaitez en faire autant ? Pour se faire il existe des librairies javascript pour vous faciliter la tâche, aujourd’hui je vous présente parallax.js. L’avantage de cette librairie, c’est aussi la possibilité de l’utiliser facilement avec le framework jQuery.

parallax-js

Pour l’utiliser, vous allez par exemple créer une structure sous cette forme :

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

L’attribut « data-depth » va de 0 à 1. Et permet de donner plus ou moins de profondeur et de mouvement aux différents calques, 0 stationnaire et 1 total mouvement en premier plan.

Pour mettre en place l’effet de parallaxe avec cette librairie et sous jQuery, il suffit simplement de faire l’appel par défaut :

$('#scene').parallax();

Mais il existe des options que l’on peut gérer de cette manière sous jQuery :

$('#scene').parallax({
  calibrateX: false,
  calibrateY: true,
  invertX: false,
  invertY: true,
  limitX: false,
  limitY: 10,
  scalarX: 2,
  scalarY: 8,
  frictionX: 0.2,
  frictionY: 0.8
});

Vous pouvez visualiser le rendu via cette démo (très belle)

Et vous pouvez visualiser parallax.js sur Github : https://github.com/wagerfield/parallax
Et télécharger directement la librairie : https://github.com/wagerfield/parallax/archive/master.zip

Articles qui peuvent vous intéresser :

Comments
  1. Cathy Caisse
  2. theinternetisfora

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*