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
Mario Kart Wii
Iutopi
Dentsunetwork
Activated Drinks
Von Dutch
Kryptis
2 – Tutoriels et ressources
Templates :
Des templates de sites en scrolling parallaxe sur WebdesignDev pour WordPress.
Tutoriels :
Un tutoriel récent et complet par WebdesignTuts+. Créer un site en parallaxe avec Stellar.js.
Un autre tutoriel par Pixel Acres : construire un site en parallaxe avec Jquery et CSS.
Plug-ins et code :
Stellar.js présenté déjà plus haut est un plug-in complet pour gérer la parallaxe.
L’effet original Nike Better World remis au goût du jour dans un plug-in !
Skrollr constitue une base idéale pour vos projets mais d’ors et déjà bien avancée.
EG Studio propose un code plus épuré, à vous de faire le reste ! 😉
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.
Ajouter une petite touche de parallaxe :
D’intéressantes ressources sur le site Codrops :
Au-delà de la parallaxe, ajoutez des effets de scroll originaux avec Stroll.js :
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 ?