09
SEP

Parallax.js - Des effets parallax réussis compatibles mobiles

Publié le 09/09/13 à 09h10 par DJo

Parallax.js est une bibliothèque Javascript compatible jQuery permettant de créer des effets parallax réussis et compatibles smartphones + tablettes.

Parallax.js est une bibliothèque Javascript compatible jQuery permettant de créer des effets parallax réussis et compatibles smartphones + tablettes.

Vous connaissez probablement l'effet parallax qui consiste à mouvoir différents niveaux d'éléments d'une page pour créer un effet de profondeur et d'animation.

Des scripts existent mais souvent ils ne permettent pas un rendu efficace sur mobile.

Parallax.js vient corriger cette lacune en proposant un script léger et adapté aux périphériques mobiles grâce au gyroscope embarqué. Si aucun moteur de mouvement n'est détecté par le script, alors c'est sur la base du curseur que les différents plans sont animés.

Côté mise en place voici comment ça fonctionne avec les différentes options à passer en data-*:

<ul id="scene"
  data-calibrate-x="false"
  data-calibrate-y="true"
  data-invert-x="false"
  data-invert-y="true"
  data-limit-x="false"
  data-limit-y="10"
  data-scalar-x="2"
  data-scalar-y="8"
  data-friction-x="0.2"
  data-friction-y="0.8">
  <li class="layer" data-depth="0.00"><img src="graphics/layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="graphics/layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="graphics/layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="graphics/layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="graphics/layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="graphics/layer1.png"></li>
</ul>

Une fois le HTML mis en place, il ne reste plus qu'à actionner le script en Javascript pur ou en 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 n'aurez plus qu'à tester et calibrer les différents plans de votre scène pour un effet moderne et dynamique garanti!

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web