L’effet de parallaxe vous connaissez? Non, rien à voir avec le Green Lantern, il s’agit d’un effet plus ou moins 3D en javascript, permettant de bouger des éléments séparément, notamment en fonction de la position de la souris. C’est ce que vous pouvez voir sur la page d’accueil de kicoe.net, ou alors par exemple sur le site officiel : http://www.cameronmcefee.com/plax-demo. Voici un mode d’emploi simplifié.
Prérequis
Tout d’abord, on va s’équiper de :
– Jquery : http://jquery.com/
– Plax : http://www.cameronmcefee.com/plax/
Il faudra alors inclure les js téléchargés à la page qui contiendra l’effet parallaxe (parallax pour les anglophones). Ensuite, il vous faut bien sûr vos image. Imaginons ici que je veuille donner l’impression que de l’herbe bouge, je vais utiliser les images herbe-back.png, poulet.png, herbe-front.png :
Passons aux choses sérieuses
Pour coder ces joyeusetés, il suffit de déclarer les images dans un div quelconque, de cette façon :
<div id="shell"> <!-- L'animation parallax --> <img src="[CHEMINDELIMAGE]/herbe-back.png" width="600" height="300" id="herbeback" alt="Herbe arriere" /> <img src="[CHEMINDELIMAGE]/poulet.png" width="316" height="316" id="poulet" alt="Poulet vengeur" /> <img src="[CHEMINDELIMAGE]/herbe-front.png" width="600" height="300" id="herbefront" alt="Herbe avant" /> </div>
Le div global permet de positionner les images à l’intérieur, puis de bouger le div sans se refaire de la css pour chacune des images. Maintenant que le cadre HTML est posé, passons au javascript et à son explication. Si vous avez bien inclus votre fichier plax.js, vous devrier pouvoir « plaxifier » les images de cette façon :
$('#herbeback').plaxify({"xRange":60,"yRange":20});
On applique donc la fonction plaxify sur l’élément qui a pour id « herbeback » (ici notre première image). Parmis les paramètres, on retrouve
– xRange : la portée maximale sur l’axe des abscisses (horizontal).
– yRange : idem avec les ordonnées (vertical)
Un petit schéma pour être plus clair, en imaginant que l’image bleue a une portée horizontale (xRange) plus grande que l’image orange :
En position A, l’image bleue ira plus loins que l’image orange. En position B (abscisse nulle) les deux images sont au même niveau, et en position C à nouveau l’image bleue ira plus loins. Cela donne une impression de profondeur pour peu que les images soient bien travaillées.
Une fois qu’on a définit les profondeurs on valide le tout :
$.plax.enable();
On va essayer d’avoir un résultat :
Voilà, en espérant avoir été clair dans les explications, même si ça ne va pas chercher super loin 🙂 Si vous voulez en savoir un peu plus sur le sujet et comprendre la façon dont le plugin fonctionne, rendez-vous sur http://www.webdesignweb.fr/web/effet-de-parallaxe-sur-son-site-jparallax-941