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 :

[pastacode lang= »markup » manual= »%3Cul%20id%3D%22scene%22%3E%0A%20%09%3Cli%20class%3D%22layer%22%20data-depth%3D%220.00%22%3E%3Cimg%20src%3D%22layer6.png%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%20class%3D%22layer%22%20data-depth%3D%220.20%22%3E%3Cimg%20src%3D%22layer5.png%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%20class%3D%22layer%22%20data-depth%3D%220.40%22%3E%3Cimg%20src%3D%22layer4.png%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%20class%3D%22layer%22%20data-depth%3D%220.60%22%3E%3Cimg%20src%3D%22layer3.png%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%20class%3D%22layer%22%20data-depth%3D%220.80%22%3E%3Cimg%20src%3D%22layer2.png%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%20class%3D%22layer%22%20data-depth%3D%221.00%22%3E%3Cimg%20src%3D%22layer1.png%22%20%2F%3E%3C%2Fli%3E%0A%3C%2Ful%3E » message= » » highlight= » » provider= »manual »/]

 

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 :

[pastacode lang= »javascript » manual= »%24(‘%23scene’).parallax()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »%24(‘%23scene’).parallax(%7B%0AcalibrateX%3A%20false%2C%0AcalibrateY%3A%20true%2C%0AinvertX%3A%20false%2C%0AinvertY%3A%20true%2C%0AlimitX%3A%20false%2C%0AlimitY%3A%2010%2C%0AscalarX%3A%202%2C%0AscalarY%3A%208%2C%0AfrictionX%3A%200.2%2C%0AfrictionY%3A%200.8%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

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 :

Author: Franck Pertegas

Share This Post On

2 Comments

  1. C’est un bel effet mais je crois que j’ai encore beaucoup à apprendre avant d’arriver à faire quelque chose d’esthétique avec ce type d’effets.Merci cependant, car j’y reviendrai.

    Post a Reply
  2. Merci de nous offrir cette superbe démo! Je vais télécharger la librairie pour tester les effets.

    Post a Reply

Trackbacks/Pingbacks

  1. Donnez vie à vos textes avec textillate un plugin jQuery | LudiBlog - [...] Vos propres effets de parallaxe avec parallax.js [...]
  2. Un Background qui s’adapte automatiquement via jQuery avec Backstrecth | LudiBlog - […] Vos propres effets de parallaxe avec parallax.js […]

Submit a Comment

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