14 superbes sites Web de défilement de parallaxe

défilement parallaxe: conception web et histoire de l
(Crédit d'image: conception Web et histoire de l'art)

Le défilement parallaxe existe depuis un certain temps, mais c'est l'une de ces tendances de conception Web qui continue. Le défilement parallaxe se produit lorsque la mise en page du site Web voit l'arriè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 d'autres, 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 Animation CSS Les exemples présentent un autre excellent moyen de faire en sorte que votre site Web se démarque de la foule. Et vous pouvez également consulter nos meilleurs outils de conception web cela vous aidera dans vos efforts de conception. Pour l'instant, cependant, jetons un coup d'œil à certains sites utilisant le défilement parallaxe de la bonne manière.



01. Histoire de l'art de la conception Web

défilement parallaxe: conception web et histoire de l

Découvrez l'histoire de l'art grâce à une série d'effets de défilement de parallaxe(Crédit d'image: conception Web et histoire de l'art)

L'histoire de l'art et la conception Web ne sont pas des sujets que vous mettriez nécessairement ensemble, mais ils sont magnifiquement unis dans ce histoire de l'art de la conception web site, qui retrace l'avenir de la conception Web en regardant l'art à 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 lorsqu'ils font défiler la page. Celui-ci vaut la peine de passer un peu de temps à explorer.

02. Le catalogue interactif Qode

défilement de parallaxe

Continuez à faire défiler pour explorer les thèmes WordPress proposés ici(Crédit d'image: Le catalogue interactif Qode)

Le Catalogue interactif Qode dispose d'un système de navigation de texte en bas stylisé pour 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 cela remplit bien son objectif. Des éclaboussures d'animation sont également utilisées à bon escient.

03. Canaux

Défilement parallaxe: canaux

Canals, c'est comme feuilleter un grand livre de table basse(Crédit d'image: Canals)

Conçu par Marcus Brown et développé par Aristide Benoist, Chaînes vous emmène dans un voyage de 400 ans à travers l'histoire des canaux d'Amsterdam du XVIIe siècle. Le site est conçu pour offrir une expérience de style éditorial, comme feuilleter un volume de table basse luxuriant, 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.

04. L'histoire des Goonies

Défilement parallaxe: l

Obtenez un doux succès rétro des années 80 ici(Crédit d'image: L'histoire des Goonies)

N'importe qui d'un certain âge a la garantie d'amour du film d'aventure pour adolescents des années 80, The Goonies, et si c'est vous, ce site est sûr de faire vibrer vos glandes de nostalgie. Créé par Joseph Berry en utilisant WebFlow, L'histoire des Goonies est un hommage à un classique rétro qui utilise le défilement parallaxe pour vous entraîner dans l'histoire, vous présenter les personnages et révéler le mode du film.

05. Dogstudio

Défilement parallaxe: DogStudio

Le doggo 3D animé est la vedette du spectacle ici [Image: Dogstudio]

L'attraction focale immédiate de Dogstudio Le site de est un beau chien 3D animé - ou est-ce un loup? - au centre de la page, qui se met à l'échelle et tourne lorsque vous faites défiler 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 élément préféré est quand il tourne devant une partie de la copie de page, obscurcissant une partie du texte.

06. ToyFight

Défilement parallaxe: ToyFight

Jonny et Leigh sont tous deux anatomiquement corrects [Image: 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). L'utilisation intelligente de la parallaxe amplifie l'effet 3D et, associée à des arrière-plans audacieux, lumineux et unis, ne devient jamais écrasante ou irritante.

07. Diesel: mauvais guide

défilement de parallaxe: Diesel

Le guide BAD de Diesel fonctionne comme un tableau d'affichage virtuel [Image: Diesel]

84.Paris a créé cet impressionnant site Web de parallaxe (et la campagne de médias sociaux associée) pour accompagner le lancement du parfum BAD de Diesel. Le site d'une page présente la série de règles qui composent le «guide MAUVAIS».

L'utilisateur peut explorer en faisant glisser la souris autour de la page de parallaxe, qui est disposée comme un tableau d'affichage d'images sur lesquelles cliquer. Il y a des conseils sur tout, de Tinder (`` Glissez à droite, à droite, à droite, à droite - vous les trierez plus tard '') à Instagram (`` N'oubliez pas de contacter un ex le jeudi #TBT '), accompagné de illustrations monochromes.

08. Firewatch

Une capture d

Chaque couche d'arbres se déplace indépendamment [Image: Campo Santo]

L'un des plus beaux exemples de défilement de parallaxe que nous ayons vu est ce site Web du jeu Piquet d'incendie , qui utilise six couches mobiles pour créer une impression de profondeur. C'est génial car il n'y a pas de détournement de défilement (ce qui accompagne souvent l'effet de parallaxe), et il n'est utilisé qu'en 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 passe, voici une belle démo sur CodePen .

09. GitHub 404

Défilement parallaxe: capture d

Le 404 de GitHub enfreint les règles de parallaxe pour un effet désorientant [Image: GitHub]

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

10. Jess et Russ

Défilement parallaxe: la capture d

Chaque illustration a un sens de la profondeur [Image: Jess & Russ]

Il n'est pas surprenant que le couple de puissance du design Russ Maschmeyer et Jessica Hische site de mariage est 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 coup d'œil.

11.Gardez votre argent

Exemple de sites Web à défilement parallaxe: Faites votre argent compte

Gérez vos finances grâce aux informations et aux conseils de Make Your Money Matter [Image: Public Service Credit Union]

La finance et l'argent ne sont pas les sujets les plus intéressants. Mais une agence numérique basée à New York Premier-né est compatible avec ce site Web de défilement de parallaxe dynamique Faites que votre argent compte pour la Caisse populaire de crédit.

Dans le but d'enseigner au public les avantages d'adhérer à une coopérative de crédit, plutôt que d'utiliser une banque, ce site génial comprend tout, du fonctionnement d'une coopérative de crédit, à où en trouver une et comment postuler, ainsi qu'une calculatrice montrant juste combien les banques profitent des dépôts des clients.

12. Madwell

défilement de parallaxe: Madwell

L'agence new-yorkaise Madwell utilise le défilement parallaxe pour ajouter une impression de profondeur [Image: Madwell]

Agence de conception et de développement Madwell , basé à New York, présente son portefeuille avec une gamme d'effets de défilement de parallaxe pour créer un style 3D visible qui ajoute une énorme quantité de profondeur.

13. New York Times: Tomato Can Blues

Exemples de sites Web à défilement parallaxe: New York Times

Une belle expérience à vivre avec cet article du New York Times à défilement parallaxe [Image:]

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

L'un des meilleurs exemples de défilement de parallaxe que nous ayons vus, l'article vous fait découvrir l'histoire d'un combattant en cage écrite par Mary Pilon. Au fur et à mesure que 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 l'attention portée aux détails transparaît. Dans l'ensemble, c'est une excellente expérience de lecture - est-ce l'avenir du journalisme en ligne?

14. Chute de neige

Exemple de sites Web à défilement parallaxe: Snow Fall

L'article «Snow Fall» du New York Times a lancé un tout nouvel engouement pour les sites de parallaxe riches [Image: New York Times]

L'un des premiers sites à vraiment repousser les limites de ce que vous pourriez faire avec un contenu éditorial long en ligne, le New York Times ' Chute de neige Cet article combine une gamme d'éléments différents, y compris le défilement parallaxe et la vidéo Web.

L'article, sur l'horreur d'une 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é l'article primé par Pulitzer d'une manière innovante qui a attiré l'attention de la communauté du design dans le monde entier.

Articles Liés: