Tout sur le parallaxe

Le parallaxe est un effet d’optique qui modifie la subjectivité, simplement dit, il permet de créer des effets originaux pour rendre votre site Web dynamique et attrayant pour les internautes. Très prisé actuellement, on peut le croiser sous divers aspects, je tenterai ici de faire le tour de ses usages les plus courants. Idéal pour s’en inspirer et en créer de nouveaux.

Le slider parallaxe

Tutoriels

Il existe d’excellents tutoriels qui vous permettront d’en créer vous même très rapidement.

Créer un slider parallax avec Jquery :

http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

Créer un slider parallax uniquement en CSS3 ( Attention à la compatibilité sur les navigateurs; ne fonctionne par exemple pas sur IE8) :

http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/

Suivre ces tutoriaux, c’est l’idéal pour découvrir comment fonctionne les effets, et ainsi réaliser le sien.

 Plugin Jquery

On pensera à Sequence JS ( github ) qui est un slider très complet responsive et compatible IE7.

 Module WordPress

Pour les utilisateurs de WordPress, il existe d’excellents modules qui permettent de créer ses slides depuis l’administration avec une très grande variété d’effets, comme vous pouvez le voir ci-dessus avec le module LayerSlider.  Très facile d’utilisation, il utilise des shortcodes pour ajouter votre slider la où vous le souhaitez.

Le scroll parallax

Démonstrations

Lorsqu’on évoque le scroll parallax, on pense forcément à d’excellentes démonstrations comme :

La présentation du Mac Pro d’apple ou la présentation Air Jordan de Nike.

Tutoriels

Pour créer un effet de scroll Parallax :

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

Créer un site web parallax avec Stellar.js

http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

Plugins JQuery

Ce plugin vous permettra de créer un site Web parallax très facilement (effet Nikebetterworld).

http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ (Github)

 

Curtain JS permet de créer un autre type d’effet de scroll Parallax très original ( Une démo chez Oackley ).

 

Stellar JS (Github) vous permettra également de créer un effet de background scroll parallax très facilement.

Inspiration

Si vous êtes à la recherche d’inspiration, voici un article très complet sur le parallax :

http://webdesy.com/parallax-scrolling-builder/

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

Trackbacks / Pingbacks

  1. Tout sur le parallaxe | Webpulser developers' b... - 02/08/2013

    [...] Tout ce qu'il faut savoir sur l'effet parallax : des tutoriels, des plugins Jquery, des modules WordPress. Avec bien sur ses démonstrations et ses inspirations  [...]

  2. Tout sur le parallaxe | Webpulser developers' b... - 14/05/2014

    […] Tout ce qu'il faut savoir sur l'effet parallax : des tutoriels, des plugins Jquery, des modules WordPress. Avec bien sur ses démonstrations et ses inspirations  […]