Qu'est-ce qu'un site web à défilement parallaxe ? Exemples de sites engageants

Le parallaxe est fermement établi sur Internet, attirant de plus en plus de designers, et il est l'une des tendances du design web. L'effet a été utilisé pour la première fois dans les animations et les jeux vidéo tels que Super Mario Bros. Cependant, ce n'est qu'en 2011 qu'il a pénétré Internet avec l'introduction de HTML5. Grâce à de petites manipulations des éléments graphiques, l'effet de parallaxe peut donner vie à un design et attirer l'utilisateur dans les histoires présentées sur un site donné.

Qu'est-ce qu'un site web à défilement parallaxe ?

Un site web typique avec un effet de parallaxe est celui dans lequel l'arrière-plan du site bouge plus lentement que les éléments au premier plan. L'effet visuel que nous sommes en mesure d'obtenir donne l'impression de mouvement et de profondeur comme s'il y avait un espace entre le premier plan et l'arrière-plan. Actuellement, les designers utilisent le parallaxe pour obtenir une variété d'effets, tels que l'agrandissement ou la réduction des composants, l'apparition et la disparition, ou la rotation d'éléments en 2D ou 3D.

Exemples de sites web en parallaxe

Comme le succès de l'effet de parallaxe dépend du temps de chargement du site web, il est recommandé pour les sites plus petits. C'est un excellent moyen de mettre en valeur une page d'accueil originale pour un nouveau produit tel qu'un nouveau modèle de chaussures, des céréales pour le petit-déjeuner, ou une nouvelle voiture. Pour les projets plus importants, des parallaxes subtiles sont recommandées pour minimiser la charge sur le site web et ne pas affecter les temps de chargement. Les designers et les développeurs frontaux utilisent également les parallaxes pour démontrer leur niveau d'expertise et leur imagination riche.

1. TAG Heuer

Le site web de Tag Heuer est un excellent exemple de l'utilisation de la parallaxe pour une présentation de produit multidimensionnelle - des montres uniques. Il utilise des modèles 3D qui apparaissent, tournent et réagissent au défilement de la page. De cette manière, l'utilisateur peut se familiariser avec les atouts du produit présenté. La typographie est également intéressante - de grandes légendes complètent les présentations de produits, donnant l'impression d'une publicité télévisée.

2. Meadlight

Le site de Meadlight est une présentation agréable d'une boisson au miel. La parallaxe a été utilisée ici de plusieurs façons. En plus de la bouteille rotative qui nous accompagne tout au long du site, les designers ont également utilisé le parallaxe dans la relation entre la typographie et l'arrière-plan. Ces astuces rendent le site très léger, avec un énorme espace entre les éléments.

3. Greenhouse Agency

Parfois, la parallaxe est un effet qui rend doucement le site plus léger. C'est un très bon truc si le designer opte pour de grands éléments graphiques et une typographie expressive, comme dans le cas de Greenhouse Agency, qui soutient les marques avec des activités de marketing et de vente.

4. Okalpha

Sur le site de Okalpha - un studio d'animation - les designers ont utilisé d'énormes éléments géométriques aux couleurs vives. La parallaxe a été utilisée comme un moyen d'animer la géométrie, qui recule au fur et à mesure que le site défile, laissant place aux textes.

5. Longshot

Le studio de production Longshot Film utilise la parallaxe horizontale pour présenter des illustrations, réalisant ainsi une bande dessinée spatiale. Ce menu particulier mène à un portfolio des œuvres des artistes. Dans le cas de ce site, les parallaxes ont été utilisées à divers niveaux, introduisant le spectateur dans l'atmosphère de la découverte de nouveaux éléments.

6. The Goonies

Le site du film - The Goonies utilise la parallaxe sur plusieurs plans, et le troisième plan est un élément fixe qui ne bouge pas. Dans la couche avec les broussailles, les designers ont utilisé un effet de zoom lors du défilement, ce qui donne automatiquement l'impression que nous nous approchons de la vue derrière elles. De plus, en s’estompant, le logo laisse place à une couche avec le texte. Ces types d'effets sont très faciles à produire, et l'implication de l'utilisateur est beaucoup plus grande.

7. Custo

Custo est un site classique dédié à la présentation d'un produit - une boîte aux lettres intelligente. Le mouvement lors du défilement de la page est très subtil, mais cela donne l'impression d'un site dynamique et renforce l'impression d'une technologie de haute qualité. La parallaxe a été utilisée pour présenter les caractéristiques du produit. Le côté gauche de l'écran montre des vues de l'application, tandis que le côté droit montre des descriptions des fonctions. Ainsi, l'utilisateur accorde plus d'attention aux informations que les auteurs du site veulent transmettre.

8. Porsche

Une idée intéressante pour l'utilisation de la parallaxe est tous les types de sites historiques, où l'élément principal est la chronologie. Porsche a créé un magnifique site web présentant les modèles successifs de voitures, à partir de 1920. Au fur et à mesure que nous descendons le site, chacun de nos mouvements révèle de nouvelles images, passant par le bas, montrant comment les voitures ont évolué au fil des décennies. La condition préalable au succès d'une telle parallaxe est sans aucun doute que les photographies soient prises de manière similaire et que les objets soient de la même taille. Ensuite, nous avons la sensation de remplacer le produit.

9. Anton & Irene

Les artistes visuels ont une tâche très difficile lorsqu'ils veulent présenter leur portfolio en ligne. Les sites sur lesquels ils se présentent et présentent leurs œuvres doivent démontrer une imagination infinie et un sens du goût. Anton & Irene - les directeurs artistiques - ont réalisé le site avec une parallaxe, qui les éloigne comme s'ils présentaient quelque chose sur un tableau noir. Les ombres derrière leurs figures et la parallaxe déplaçant les figures latéralement créent une belle impression de l'espace derrière et entre elles.

10. Dior by Starck

Les auteurs de ce site ont utilisé la parallaxe pour créer une histoire particulière sur la création d'une chaise unique. Au fur et à mesure que les utilisateurs descendent le site, ils sont entraînés dans l'histoire grâce à des légendes apparaissant, des lumières, du texte, et des images. Tout ce que nous voyons, ce sont les images se déplaçant les unes par rapport aux autres et l'utilisation de la transparence.

11. Blok Watches

Voici un autre site de produit, cette fois mettant en avant des montres pour enfants. Les designers ont joué sur les lettres et ont décidé de les mettre en mouvement en utilisant le parallaxe. Pour renforcer l'effet, les artistes ont utilisé l'animation des montres avec des éléments en 3D, défilant par rapport aux paragraphes adjacents. Cela donne à tout le site un effet léger, spatial, et même tridimensionnel.

Site web à défilement parallaxe - résumé

Nous avons vu 11 sites web avec différentes applications de la parallaxe. Certains étaient juste de légères animations, enrichissant et donnant de la légèreté au site, tandis que d'autres racontaient des histoires et nous plongeaient dans leur monde comme un film ou un jeu informatique. Cela montre à quel point les designers web ont gagné en potentiel en appliquant un principe très ancien de construction d'animation. Cependant, il est important de se rappeler que ce type de solution fonctionne bien sur les versions de bureau des sites web. Le deuxième aspect qui garantira le succès d'une telle solution est la quantité d'informations que nous voulons transmettre. Si nous savons qu'il y aura plus d'informations sur notre page web, il est préférable que les transitions et les animations soient plus douces et servent à améliorer la dynamique et à créer de l'espace.

Vous vous demandez si la parallaxe est une bonne solution pour votre site web ? Notre équipe de design UX et UI analysera votre projet et vous conseillera sur les effets à intégrer.