Les effets de parallaxe restent l’une des tendances les plus en vogue en matière de conception Web. Cette technique de défilement animé se produit lorsque l’arrière-plan et le premier plan se déplacent à des vitesses différentes pendant que l’utilisateur fait défiler de manière à ce que deux calques indépendants se déplacent simultanément.
Cet effet peut être utilisé pour n'importe quel nombre de types de sites Web et constitue un moyen amusant de créer et d'accroître l'engagement des utilisateurs. La bonne chose à propos des effets de parallaxe est que vous n'avez pas à les utiliser sur chaque page d'un dessin; le défilement parallaxe est une excellente technique de page d'accueil pour aider les utilisateurs à appeler à l'action ou à un autre contenu.
Les effets de parallaxe créent un élément de profondeur et de distance et un sens plus tridimensionnel que certaines autres techniques, donnant ainsi aux utilisateurs le sentiment de faire partie intégrante de la conception.
L'inconvénient des effets de parallaxe est qu'ils ne fonctionnent pas toujours sur les appareils mobiles. (Mais il existe également des solutions de contournement dans le tutoriel à la fin de cet article.)
Voici cinq effets et styles de parallaxe à prendre en compte. (Assurez-vous de cliquer sur les liens pour voir exactement le fonctionnement de chaque animation.)
1. Animation pour montrer le changement
Utilisez les effets de parallaxe pour montrer les changements dans un projet. Les couches de mouvement peuvent indiquer une distance dans le temps, l'espace ou l'emplacement.
Les effets de parallaxe sont les meilleurs changements lorsqu’ils travaillent avec le contenu du site Web.
Porsche Evolution, ci-dessus, montre l’évolution dans le temps avec les modifications apportées à l’arrière-plan et à la voiture au premier plan de chaque image. (Augmentez le son et la musique change tous les dix ans.)
La conception permet aux utilisateurs de faire défiler l'écran car vous voulez voir à quoi ressemblera la voiture. Cette technique peut fonctionner dans un ordre chronologique (comme on le voit ici) ou dans un ordre chronologique inverse. Et une des clés pour que cela fonctionne est que ce site fonctionne dans les deux sens - même la musique revient en arrière - si vous faites défiler vers le haut ou le bas.
Sonance utilise la parallaxe pour indiquer un autre type de changement: le changement d’emplacement tout au long de la conception. Les effets de parallaxe font partie du modèle de navigation général du site Web et il existe un indice quant à l'emplacement des utilisateurs dans la conception (l'emplacement) tout au long de l'expérience.
2. Encourager le défilement
Les effets de parallaxe peuvent aider à créer un engagement, car ils encouragent le défilement pour permettre aux utilisateurs d'interagir avec la conception pendant une période plus longue.
De nombreux modèles comportant des effets de parallaxe incluent un? Scroll? des instructions ou des signaux directement sur la page d’accueil pour encourager cette interaction dès le début. (La page d'accueil de The Walking Dead Zombiefied comprend ces instructions sur la page précédant l'image sélectionnée ci-dessus.)
Le site Web de Walking Dead fait quelque chose d'un peu différent avec la parallaxe pour encourager les interactions - le défilement emmène les utilisateurs sur l'écran au fur et à mesure que le personnage se déplace dans différents panneaux de style bande dessinée - plutôt que de haut en bas.
3. Mouvement et couleur
L'un des moyens les plus amusants d'utiliser le défilement parallaxe consiste à incorporer des couleurs dans différents contenus? Panneaux? pour présenter des éléments ou des projets de portefeuille. Le changement de couleur et l'animation peuvent signifier quelque chose de nouveau.
La couleur est également un outil de design qui attire l’attention des utilisateurs.
Werkstatt, ci-dessus, utilise un contour blanc et gris de départ avec des couches de parallaxe entre les éléments et le texte. Mais une action de survol supplémentaire donne vie à chaque projet avec des couleurs. La combinaison des effets fonctionne bien car le reste de la conception est simple et encourage les utilisateurs à interagir avec chaque élément.
Lois Jeans adopte une autre approche de parallaxe en utilisant la couleur. Chaque nouvelle couleur met en valeur une partie différente de la campagne vestimentaire - les acheteurs peuvent voir les jeans sur des modèles dans différents environnements naturels comprenant le feu, l’air, l’eau et la terre.
4. Rendre l'information plus facile à digérer
Les effets de parallaxe peuvent aider à rendre des informations complexes ou des blocs de texte lourds plus petits, plus lisibles et plus faciles à digérer. C'est un concept intéressant lorsque vous songez à changer de type, mais la pratique actuelle consistait à déplacer des conteneurs contenant du type.
Les exemples ci-dessus illustrent deux applications différentes de ce concept.
Melanie David a une longue introduction sur elle à propos de l'écran. Le côté gauche montrant l'élément de navigation - À propos de - ne bouge pas, tandis que les utilisateurs peuvent faire défiler le texte à droite. Lorsque le bloc de texte se termine, les deux côtés de la page passent à la section suivante. C'est une excellente solution pour un bloc de texte plus long que la zone de contenu visuel.
Le restaurant Le Duc utilise des blocs individuels pour différentes sections du menu qui apparaissent en fonction de la façon dont vous lisez et commandez les aliments. Les animations sont simples avec le fond de poisson amusant - qui dit quelque chose aux utilisateurs sur la salle à manger - et rend le menu facile à digérer.
5. Visualiser? Numérique? Réalité
L'une des principales utilisations des effets de parallaxe est d'aider les utilisateurs à visualiser quelque chose qu'ils ne pourraient pas voir autrement. De plus en plus de conceptions utilisent une combinaison d'animation en trois dimensions et de parallaxe pour créer des expériences plus réalistes.
Ces conceptions 3D ont tendance à tomber dans le royaume d'une expérience de style plus cartoon, telle que Madwell, ci-dessus, mais peuvent également avoir une sensation plus VR lorsque la conception fonctionne avec un type d'appareil spécifique.
Le site Web Seattle Space Needle est un exemple classique de site utilisant des effets de parallaxe qui existe depuis un certain temps. Il utilise une technique de défilement vers le haut pour imiter l’aspect qu’il donnerait au sommet du repère.
Le défilement parallaxe déplace la ligne d'horizon contre l'intérieur du bâtiment avec des messages d'appel à l'action et une grande barre de navigation indiquant la hauteur de l'emplacement. Le design est éducatif, aventureux et montre à l'utilisateur quelque chose de difficile à imaginer sans l'effet animé.
3 grandes ressources de parallaxe
Prêt à créer un effet de parallaxe pour votre prochain projet? Ces tutoriels et extraits de code vous aideront à ajouter un effet animé à votre conception, ce qui aidera à attirer les utilisateurs et à les fidéliser plus longtemps.
- Comment créer un effet de défilement de parallaxe: Le didacticiel w3schools vous explique comment créer des effets de conteneur en mouvement et vous explique comment utiliser les requêtes multimédia pour obtenir un effet similaire sur les appareils mobiles.
- Démonstration de site Web de défilement de parallaxe: découvrez comment cette technique fonctionne avec une démonstration et une explication simples.
- 15 effets de parallaxe captivants de CodePen: la liste présente quelques grands stylos de parallaxe pour vous permettre de lancer votre créativité et de pouvoir jouer avec chacun d'eux.
Conclusion
Bien que les effets de parallaxe soient branchés et amusants, ils ne sont pas valables pour tous les projets. Il est également important de prendre en compte le fait que certains utilisateurs de certains appareils pourraient avoir du mal à naviguer sur un site Web comportant beaucoup d'animation.
Faites l'inventaire de vos utilisateurs et de leurs préférences avant d'ajouter un effet de parallaxe. Commencez petit avec la parallaxe dans un emplacement, tel que la page d'accueil, et suivez les analyses pour voir si cela fonctionne pour vous (plus de temps passé sur le site indique un indice de son fonctionnement).
Utilisez la parallaxe lorsque cela fonctionne avec votre contenu et votre messagerie. Cette technique à la mode devrait être amusante à concevoir et à interagir.