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 ?

24 commentaires

  • Davz

    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… :-]

  • 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 !

  • @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.

  • cathy

    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!

  • 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 =)

  • 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.

  • Salut Geoffrey,

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

  • […] editorial y el diseño gráfico . El Monstruo que no dejaba ir a los niños al colegio La boite à outils de la parallaxe Bientôt deux ans que les effets de parallaxe font partie du quotidien sur le web. Si vous […]

  • […] https://www.webdesignertrends.com/2012/07/la-boite-a-outils-de-la-parallaxe/ Par quentin le April 28, 2013 Dans Uncategorized SITE EN VERSION BETA C'EST A DIRE ? HomeSample Page SOON: HISTOIRE / FRIENDS / TEAM SUIVEZ NOUS FACEBOOK / TWITTER / PINTEREST :NEW Blog designé par quentin claude michel et propulsé par l'excelent wordpress, pour la boutique Cordoshop. © 2013, Cordoshop. All rights reserved. RETOUR TOUT EN HAUT ▲ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.box', columnWidth: 385, isAnimated: true, isFitWidth: true }); }); window.onscroll = function() { var foo = Sticky.scroll(); Sticky.set(document.getElementById("all"), document.getElementById("sticky"), foo); Sticky.set(document.getElementById("conteneur2"), document.getElementById("sticky2"), foo); }; $('a[href^="#"]').click(function(){ var the_id = $(this).attr("href"); $('html, body').animate({ scrollTop:$(the_id).offset().top }, 'slow'); return false; }); […]

  • […] La boite à outils de la parallaxe […]

  • […] meilleure expérience utilisateur. Qui aurait pensé trouver, il y a encore 10 ans, des sites en parallaxe comme on en trouvait à foison il y a 1 voir 2 ans en arrière ? Des éléments qui bougent dans […]

  • […] 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 ! [+] webdev front home • iPhone & iPad app • android app • contact • blog • facebook • twitter to experience pearltrees activate javascript. […]

  • […] La boite à outils de la parallaxe Emergency […]

  • […] La boite à outils de la parallaxe […]

  • […] La boite à outils de la parallaxe Effet de parallaxe sur son site – jParallax (function(jQuery) { function stripFiletype(ref) { var x=ref.replace('.html', ''); return x.replace('#', ''); function initOrigin(l) { home • iPhone & iPad app • android app • contact • blog • facebook • twitter to experience pearltrees activate javascript. […]

  • […] La boite à outils de la parallaxe 50 super plugins jQuery récents pour rendre votre site ergonomique et attrayant Cela fait quelques années que le Javascript et notamment jQuery – qui simplifie et norme son utilisation – continuent d’être de plus en plus utilisés. Aujourd’hui cette technologie est toujours plus facile à exploiter grâce à l’installation de plugins, c’est-à-dire de petits modules de code. Il n’a jamais été aussi facile qu’aujourd’hui de rendre un site ergonomique, originale et attractif ! Ces 50 plugins sélectionnés avec soin parmi les milliers existants vous permettront de transformer n’importe quel site fade en site riche, intuitif, interactif et ergonomique, y compris sur mobile. by Ginet Vincent – le 27/05/2011 Qu'est ce qu'un effet de parallaxe ? […]

  • […] dansleur stratégie web, mobile, sociales et CRM (acquisition, fidélisation, notoriété… ). La boite à outils de la parallaxe. Bientôt deux ans que les effets de parallaxe font partie du quotidien sur le […]

  • […] subtiles animations tout au long de la navigation à grand coup de SVG ou avec de subtils effets de parallaxe. Elles donnent de la vie aux interfaces et améliorent l’expérience de […]

  • Thierry S.

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

  • Bonjour
    j’ai un site avec cet effet mais je ne peux plus visualiser cet effet sur mon ordi portable sous window8.1 alors que sur windows10 et xp ca fontionne.
    Ca fonctionnait bien au debut et depuis quelques temps les images defilent par l’ascensseur mais sans effet de superposition.
    ya t-il quelqu’un qui sait comment resoudre le probleme ?
    Merci d’avance
    Patrick

    • Bonjour Noémie (ou Patrick).

      Au-delà du système, c’est surtout le navigateur qui est important pour la visualisation de ce genre de site. L’article datant quelque peu aujourd’hui, il est possible que certains site ne s’affichent pas correctement. Essayez de naviguer avec Google Chrome pour résoudre le problème 😉

  • […] mini landing page d’Ajohn Nichols mixe parfaitement glitch et parallaxe pour donner vie à son interface […]

  • […] Pearltrees vous permet de trouver les arbres voisins des vôtres et ainsi favorise les nouvelles découvertes. 3 modes de recherche sont présents : recherche dans Pearltrees, dans un compte ou recherche de quelqu’un. Créer une perle en surfant Des extensions pour les navigateurs Chrome, Firefox et Internet Explorer existent. Le partage des perles et pearltrees facilité Vous pouvez partager facilement un pearltree ou une perle par les moyens suivants : outils de partage. Tutoriel : fabrication d'une boîte à outils en bois ! La boite à outils de la parallaxe. […]

  • […] terminé : myCinema – 01net. Telecharger.com. Fiches-outils pédagogiques téléchargeables. La boite à outils de la parallaxe. T. Karsenti: ASPID, un modèle du processus d'intégration des TIC en éducation. À chaque […]

Répondre Noemie Annuler la réponse

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

*