La boite à outils de la parallaxe

La boite à outils de la parallaxe

Bientôt deux ans que les effets de parallaxe font parti du quotidien sur le web. Si vous n’avez pas encore sauté le pas, c’est le moment de vous y mettre !

Petite piqure de rappel sur la parallaxe avec cet article « 11 sites avec effet de parallaxe » mis en ligne début 2011. L’effet ne date pas d’hier, utilisé sur le web à l’époque, notamment avec Flash, la parallaxe donne de la profondeur et du relief aux interfaces plates. Cet effet de profondeur est obtenu au déplacement de plusieurs éléments  sur différents plans et à des vitesses différentes.

L’ancien site Nike Better World avait remis l’effet au goût du jour en utilisant un subtil mélange de Javascript et d’images PNG transparentes. Il s’agit simplement d’une bonne innovation construite sur une base de site one-page. Cette tendance du parallaxe est désormais bien ancrée dans le paysage du webdesign.

Peut-on imaginer voir cette tendance se développer même avec l’ampleur que prend le responsive design ? Il n’est pas impossible de faire cohabiter les deux techniques, mais rendre le tout fonctionnel demande un travail plus lourd. Dans tous les cas, créer un site fluide nécessite s’armer de bons plug-ins et d’utiliser les bonne techniques.

Voici l’intérêt de cet article, qui est en quelque sorte une boite à outils et à utiles. Servez-vous, proposez vos ressources et en avant la création !

1 – Pour commencer, quelques exemples :

Les sélections de sites utilisant de la parallaxe sont fréquentes sur les blogs design. Retrouvez ci-dessous quelques exemples à ne pas manquer.

Lois Jeans

Parallaxe webdesign

Mario Kart Wii

Parallaxe

Iutopi

Parallaxe

Parallaxe

Dentsunetwork

Parallaxe`

Activated Drinks

Parallaxe

Von Dutch

Design parallaxe

Kryptis

Parallaxe

2 – Tutoriels et ressources

Templates :

Des templates de sites en scrolling parallaxe sur WebdesignDev pour WordPress.

Parallaxe template

Tutoriels :

Un tutoriel récent et complet par WebdesignTuts+. Créer un site en parallaxe avec Stellar.js.

Parallaxe

Un autre tutoriel par Pixel Acres : construire un site en parallaxe avec Jquery et CSS.

paralaxe

Plug-ins et code :

Stellar.js présenté déjà plus haut est un plug-in complet pour gérer la parallaxe.

Parallaxe

L’effet original Nike Better World remis au goût du jour dans un plug-in !

Parallaxe

Skrollr constitue une base idéale pour vos projets mais d’ors et déjà bien avancée.

Parallaxe

EG Studio propose un code plus épuré, à vous de faire le reste ! ;)

Parallaxe

De la parallaxe basée sur du CSS3 : voilà ce que propose le blog Creative Juiz avec une bonne explication en plus de la démonstration.

Parallaxe

Ajouter une petite touche de parallaxe :

D’intéressantes ressources sur le site Codrops :

Parallaxe

Parallaxe

Au-delà de la parallaxe, ajoutez des effets de scroll originaux avec Stroll.js :

Parallaxe

Trop de parallaxe, tue-elle la parallaxe ?

Comme nous avons pu le voir, les articles et ressources sur la parallaxe ne manquent pas. Les développeurs et intégrateurs ont redoublés d’ingéniosité pour proposer des outils toujours plus puissants et surtout plus optimisés. Vous trouverez probablement toutes les réponses à vos questions en parcourant ces articles.

Maintenant que cette pratique c’est presque totalement démocratisée, est-il encore judicieux de se lancer dans un projet basé principalement sur de la parallaxe ? Les sites utilisant cette technique commencent très fortement à être tous issus du même moule. Il faudra redoubler d’ingéniosité pour utiliser ces outils et proposer de nouvelles choses pour  être réellement original. Êtes-vous du même avis ?

Vous aimerez aussi :

Cette entrée a été publiée dans Tutoriels, avec comme mot(s)-clef(s) , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

19 commentaires sur La boite à outils de la parallaxe

  1. Davz dit :

    Très bon article !
    Pour ma part, j’ai juste étudié le phénomène et le fonctionnement mais je n’ai pas eu l’utilité de l’implémenter dans un site… Ce genre de phénomène de mode n’apporte rien créativement si il n’y a pas l’utilité… Arrêtons de faire de la surenchère d’effets hipster surtout si il n’y a pas lieu d’être.
    Cela n’empêche pas que j’aime la parallaxe… :-]

  2. Proxy dit :

    Excellent article comme d’habitude ! C’est vrai que c’est un effet vraiment sympa, mais pas sur qu’il soit adéquate au vue des standars qui sont encré chez la plupart des utilisateurs.

    Pas très pertinent comme choix, mais tellement fun et sympa à voir !

  3. WDTrends dit :

    @Davz : Merci à toi ! En effet si c’est faire de la parallaxe pour faire de la parallaxe cela n’a pas trop d’intérêt. Reste à trouver des effets utiles qui rendent le site agréable et bien mieux utilisable.

    @Proxy : Merci pour ton retour ! De même je pense que l’effet est à utiliser dans un cadre bien précis, même si les utilisateurs X n’y verront peut-être que du feu.

  4. cathy dit :

    bel article !
    c’est vrai qu’à force on a faillit faire une overdose de parallaxe entre 2011 et 12, trop de parallaxe tue le parallaxe. Mais bon c’est une technique vieille comme les premiers jeux vidéos, flash aussi nous gavait de parallaxe dans les années 90, et il y a eu quelques merveilles ces derniers mois ( et je me permet d’ajouter mon chouchou : http://www.swag2012.fr/). C’est trop ludique pour ne pas l’utiliser, trop connu maintenant pour l’utiliser pour tout et n’importe quoi, et surtout n’importe comment. puisque l’effet surprise ne suffit plus. ..à murir un peu ?
    Bonne soirée à tous!

  5. Guillaume dit :

    Personnellement, j’adore le parallaxe et ce ne sont pas les sites de Nintendo (avec Mario Kart) et le site de Iutopi qui vont me faire changer d’avis :p

    Merci pour le partage en tout cas =)

    PS : J’avais pour ma part découvert le parallaxe avec le site http://benthebodyguard.com/index.php =)

  6. Salut Arnaud !

    Merci pour la mention, et bravo pour cet article plein de ressources.
    skrollr a l’air pas trop mal pour démarrer en douceur et surtout savoir où on va :)

    Au plaisir de te lire.

  7. WDTrends dit :

    Salut Geoffrey,

    De rien, il faillait citer ta ressource :). Merci pour ton commentaire !

  8. Ping : Piges pour site perso | Pearltrees

  9. Ping : EFFET PARALLAXE | internetinternetinternet

  10. Ping : Parallaxe | Pearltrees

  11. Ping : UI/UX : et si on s'inspirait des films ? | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels

  12. Ping : Parallax | Pearltrees

  13. Ping : Idées Web | Pearltrees

  14. Ping : Parallax | Pearltrees

  15. Ping : Plug. Para | Pearltrees

  16. Ping : Parrallaxe | Pearltrees

  17. Ping : Veille site one page | Pearltrees

  18. Ping : Sites d'agences créatives : tendances et inspirations pour 2015 | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels

  19. Thierry S. dit :

    Article très intéressant et très instructif mais bourré de fautes d’orthographe :-)

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>