La boite à outils de la parallaxe

La boite à outils de la parallaxe

Bientôt deux ans que les effets de parallaxe font partie 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 et habituelles. Le déplacement de plusieurs éléments au scroll sur des couches et à des vitesses différentes donne cet effet de profondeur. 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. Ils s’agit simplement d’une bonne innovation construite sur un base de site one-page. Cette tendance du parallaxe est désormais bien ancrée dans le paysage du webdesign mondial.

Peux-on imaginer qu’elle continue son développement 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 sur différentes plates-formes et résolutions d’écran demande un bien lourd travail. Dans tous les cas pour créer un site fluide et intéressant mieux vaut-il s’armer des bons plug-ins et 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 blog design. Retrouvez quelques exemples, à ne pas manquer. Certains étaient déjà présents dans les sélections des incontournables.

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, c’est ce que propose le blog Creative Juiz avec une bonne explication en plus de la démonstration.

Parallaxe

Ajouter une petite touche de parallaxe :

Pour ne pas faire un site complet mais simplement une petite partie comme un slider, le site Codrops propose des ressources intéressantes :

Parallaxe

Parallaxe

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

Parallaxe

Trop de parallaxe, tue 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 puissant et surtout plus optimisés. Vous trouverez probablement toutes les réponses à vos questions en parcourant ces articles.

Justement, 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 comment très fortement à être tous issus du même moule. Il faudra redoubler d’ingéniosité pour utiliser ces outils comme base et proposer des choses nouvelles afin de créer quelque chose de 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.

16 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

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>