14 superbes sites Web à défilement parallaxe

Le défilement parallaxe existe depuis un certain temps, mais cest une de ces tendances en matière de conception Web qui continue. Le défilement parallaxe se produit lorsque la mise en page du site Web voit larrière-plan de la page Web se déplacer plus lentement vers le premier plan, créant un effet 3D lorsque vous faites défiler. Utilisé avec parcimonie, il peut fournir un élément de profondeur agréable et subtil qui se traduit par un site Web distinctif et mémorable.

Pour montrer comment cela doit être fait, voici quelques sites qui utilisent cette technique avec brio. Dans certains cas, le défilement de parallaxe est la vedette du spectacle; dans dautres, cela ajoute simplement une touche de profondeur qui fait ressortir un peu le premier plan.

Si vous avez vraiment envie de pousser le bateau, ces impressionnants exemples danimation CSS présentent une autre excellente façon de faire ressortir votre site Web hors de la foule. Et vous pouvez également consulter nos meilleurs outils de conception Web qui vous aideront dans vos efforts de conception. Pour linstant, cependant, jetons un coup dœil à certains sites utilisant le défilement parallaxe de la bonne manière.

Histoire de lart de la conception Web

Lhistoire de lart et la conception Web ne sont pas des sujets que vous mettriez nécessairement ensemble, mais ils sont magnifiquement unis dans ce site dhistoire de lart de la conception Web, qui retrace lavenir de la conception Web en regardant lart à travers le temps.

Il existe une gamme de techniques de défilement de parallaxe en jeu ici, ce qui signifie que les utilisateurs sont constamment surpris et ravis comme ils font défiler la page. Celui-ci vaut la peine de passer un peu de temps à explorer.

Le catalogue interactif Qode

Le catalogue interactif Qode a un système de navigation de texte en bas stylisé à révéler une image pour chaque élément. En cliquant sur le catalogue, le défilement de parallaxe horizontal est utilisé pour présenter une gamme de thèmes WordPress. Ce n’est pas l’utilisation la plus révolutionnaire du défilement parallaxe dans cette liste, mais il remplit bien son rôle. Des éclaboussures d’animation sont également utilisées à bon escient.

Canals

Conçu par Marcus Brown et développé par Aristide Benoist, Canals vous emmène dans un voyage de 400 ans à travers lhistoire des canaux dAmsterdam du XVIIe siècle. Le site est conçu pour offrir une expérience de style éditorial , comme feuilleter un volume de table basse luxuriante, et il fait un grand usage de la parallaxe pour attirer votre attention sur de nouvelles sections de son histoire et pour donner au site un effet de profondeur subtil.

Lhistoire des Goonies

Nimporte qui dun certain âge a la garantie damour « 80s te en film daventure, The Goonies, et si cest vous, ce site ne manquera pas de faire vibrer vos glandes de nostalgie. Créé par Joseph Berry à laide de WebFlow, The Story of The Goonies est un hommage à un classique rétro qui utilise le défilement parallaxe pour vous entraîner dans lhistoire, vous présenter les personnages et révéler le mode du film.

Dogstudio

Lattrait principal immédiat du site de Dogstudio est un beau chien 3D animé – ou est-ce un loup? – au centre de la page, qui évolue et tourne lorsque vous faites défiler votre chemin le long de la page de parallaxe. Son éclairage change de couleur lorsque vous survolez les titres des projets récents de Dogstudio, et peut-être que notre partie préférée est quand il tourne devant une partie de la copie de la page, obscurcissant une partie du texte.

ToyFight

ToyFight est une agence de création primée, et son site Web est très amusant. Les fondateurs Jonny Lander et Leigh Whipday se sont transformés en figurines 3D, qui apparaissent dans une gamme de scènes à travers le site (y compris cette référence effrontée Sagmeister & Walsh). Lutilisation intelligente de la parallaxe amplifie leffet 3D et, associée à des arrière-plans audacieux, lumineux et unis, ne devient jamais accablante ou irritante.

Diesel: BAD Guide

84.Paris a créé cet impressionnant site Web de parallaxe (et campagne associée sur les réseaux sociaux) pour accompagner le lancement du parfum BAD de Diesel. Le site dune page présente la série de règles qui composent le «Guide MAUVAIS».

Lutilisateur peut explorer en faisant glisser la souris autour de la page de parallaxe, qui est disposée comme un tableau daffichage dimages sur lesquelles cliquer. Il y a des conseils sur tout de Tinder (« Balayez vers la droite, la droite, la droite, la droite – vous » allez les trier out later « ) sur Instagram ( » Noubliez pas de contacter un ex le jeudi #TBT « ), accompagné dillustrations monochromes.

Firewatch

Lun des le plus bel exemple de défilement de parallaxe que nous ayons vu est ce site Web pour le jeu Firewatch, qui utilise six couches mobiles pour créer une impression de profondeur. Cest génial car il ny a pas de détournement de défilement (quelque chose qui accompagne souvent leffet de parallaxe), et il nest utilisé quen haut de la page – le reste du site est toujours pour que vous puissiez lire les informations sans avoir le mal de mer. Si vous voulez voir comment cela se fait, voici une belle démo sur CodePen.

GitHub 404

La page 404 de GitHub « nest pas strictement le défilement de parallaxe car leffet se produit sur le mouvement de la souris par opposition au défilement, mais cest une page vraiment amusante qui utilise la superposition pour ajouter de la profondeur. Contrairement à la parallaxe «correcte», larrière-plan se déplace plus rapidement que le premier plan, créant une sensation désorientante dun autre monde.

Jess & Russ

Il nest pas surprenant que le site de mariage de Russ Maschmeyer et Jessica Hische soit une beauté à voir. Le site retrace leur histoire romantique, avec un défilement parallaxe utilisé pour ajouter de la profondeur aux illustrations. Ils se sont mariés en 2012, mais le site Web vaut toujours le détour.

Faites que votre argent compte

La finance et largent ne sont pas les sujets les plus intéressants. Mais lagence numérique new-yorkaise Firstborn est daccord avec ce site Web dynamique à défilement parallaxe Make Your Money Matter pour la Public Service Credit Union.

Dans le but denseigner au public les avantages de ladhésion à une coopérative de crédit, plutôt que dutiliser une banque, ce site génial comprend tout, du fonctionnement dune coopérative de crédit à lendroit où en trouver une et comment faire une demande, ainsi quune calculatrice montrant à quel point les banques profitent des dépôts des clients.

Madwell

Lagence de design et de développement Madwell, basée à New York, présente son portefeuille avec une gamme deffets de défilement de parallaxe pour créer un style 3D visible qui ajoute un énorme profondeur.

New York Times: Tomato Can Blues

À lère daujourdhui de faible capacité dattention et de médias de taille réduite, comment attirer les gens vers le journalisme de longue durée? Tomato Can Blues est une excellente réponse à ce problème du New York Times, combinant des techniques de conception Web intelligentes avec la narration et des illustrations inspirées de la bande dessinée créées par Atilla Futaki.

Lun des meilleurs exemples de défilement parallaxe que nous « Jai vu, larticle vous emmène à travers lhistoire dun combattant en cage écrite par Mary Pilon. Lorsque vous faites défiler le contenu, les illustrations prennent vie avec des animations et des modifications intelligentes, vous permettant de vous immerger pleinement dans le contenu.

Les illustrations de Futaki étaient basées sur des dossiers de police, des témoignages, des photographies et les notes du journaliste, et lattention portée aux détails transparaît. Dans lensemble, cest une excellente expérience de lecture – est-ce lavenir du journalisme en ligne? ?

Chutes de neige

Lun des premiers sites à vraiment repousser les limites de ce que vous pourriez faire avec du contenu éditorial long en ligne, larticle Snow Fall du New York Times combine une gamme déléments différents, y compris le défilement parallaxe et la vidéo Web.

Larticle, sur lhorreur dune avalanche à Tunnel Creek, a été publié en ligne en décembre 2012, mais reste un exemple de ce que vous pouvez faire avec le défilement parallaxe. Le journal a présenté larticle primé par Pulitzer dune manière innovante qui a attiré lattention de la communauté du design dans le monde entier.

• 19 réactif vraiment utile tutoriels de conception Web
• meilleurs disques durs externes
• pages derreur 404 brillamment conçues