Mouvement et narration
Comment créer de la profondeur avec la parallaxe sans désorienter le visiteur ?
Créer de la profondeur avec la parallaxe consiste à faire évoluer des couches à des rythmes différents, tout en conservant des repères compréhensibles. Le mouvement doit donner une relation entre un premier plan, un sujet et un fond. S'il affecte tout simultanément, le visiteur peut perdre ce qui reste stable dans la scène.
L'essentiel.
La parallaxe crée une profondeur apparente par des déplacements relatifs entre les couches. Pour rester compréhensible, elle a besoin d’un repère stable, d’une amplitude maîtrisée et d’une version qui conserve la composition lorsque le mouvement est réduit.
- Définissez les plans et le repère stable avant de régler leurs déplacements.
- Réservez les mouvements les plus visibles aux éléments qui les justifient.
- Gardez les textes et les commandes suffisamment stables pour être lus et utilisés.
- Préparez une composition fixe ou simplifiée qui conserve le sens de la scène.
La parallaxe n'est pas une preuve de sophistication à appliquer partout. Elle devient pertinente lorsqu'elle exprime un espace, une distance ou une succession de plans utile au récit. Son amplitude et son périmètre doivent être choisis avec la lecture et les autres interactions de la page.
Construire une scène avant de lui donner du mouvement
Commencez par une composition immobile. Le premier plan, le sujet et l'arrière-plan doivent déjà former une relation lisible. Le mouvement peut renforcer cette relation, mais il ne devrait pas être le seul moyen de comprendre ce que l'on regarde.
Choisissez ensuite le repère qui restera stable : un titre, un objet principal ou une zone de lecture. Ce repère donne au visiteur une base pour interpréter les déplacements. Sans lui, plusieurs couches peuvent sembler glisser de manière indépendante.
La propriété CSS perspective règle la projection d'éléments positionnés en 3D. Elle ne constitue pas à elle seule un scénario de parallaxe. Le mouvement relatif et son lien avec la navigation restent des décisions de conception et d'implémentation.
Régler les différences de mouvement
La profondeur vient de la relation entre les couches. Il n'est pas nécessaire d'attribuer à chacune une trajectoire spectaculaire. Une différence modérée peut suffire à rendre un espace perceptible, surtout si les tailles, les recouvrements et les contrastes participent déjà à la composition.
Évitez de cumuler plusieurs axes sans raison. Un déplacement vertical lié au scroll, une rotation liée au pointeur et un zoom permanent peuvent produire des signaux concurrents. Choisissez la relation spatiale qui porte le mieux l'idée.
| Plan | Fonction | Mouvement à examiner | Limite à surveiller |
|---|---|---|---|
| Fond | Situer l'espace | Déplacement discret | Ne pas attirer constamment le regard |
| Sujet | Porter l'information | Stable ou mouvement mesuré | Rester examinable |
| Premier plan | Donner une proximité | Décalage plus visible si utile | Ne pas masquer le contenu |
| Texte et commande | Permettre de comprendre et d'agir | Stabilité privilégiée | Aucun pointage incertain |
Exemple fictif : une exposition sur les jardins
Un site présente une exposition consacrée aux jardins. L'ouverture associe un fond végétal, une sculpture et quelques feuilles au premier plan. La première version fait bouger les trois couches fortement au défilement, tandis que le titre suit une autre trajectoire. L'ensemble devient difficile à lire.
Nous stabilisons la sculpture et le titre. Le fond se déplace légèrement, et les feuilles créent une profondeur plus perceptible dans une courte zone. La scène retrouve un centre clair. Une fois l'ouverture passée, les sections documentaires utilisent une composition plus simple.
La version réduite en mouvement conserve les recouvrements et les rapports d'échelle, mais retire les déplacements. Le visiteur retrouve le même univers et les mêmes informations. La profondeur appartient donc aussi au dessin de la scène, pas seulement à son animation.
La profondeur a besoin d’un repère
- Fond végétalUn déplacement discret situe l’espace sans devenir le sujet.
- SculptureL’objet principal reste stable et facile à examiner.
- Feuilles prochesUn décalage limité donne une proximité sans masquer le contenu.
- TitreLa lecture conserve un repère stable pendant la séquence.
- Version fixeLes recouvrements et les échelles gardent la profondeur sans déplacement.
Préserver la lecture et la maîtrise du geste
Placez les textes sur des surfaces dont le comportement reste prévisible. Une personne doit pouvoir s'arrêter, lire et sélectionner sans suivre une cible qui continue à se déplacer. Les commandes doivent également garder une position suffisamment stable au moment où l'on tente de les utiliser.
Testez le défilement dans les deux sens et à différentes vitesses. Une scène peut paraître cohérente à l'aller et désordonnée au retour. Les changements brusques de trajectoire ou les limites mal raccordées méritent une correction spécifique.
Vérifiez aussi la place occupée par l'effet dans le parcours. Une séquence expressive peut être courte et mémorable. Répétée sur toute la page, elle risque surtout de devenir une contrainte permanente de consultation.
Concevoir la réduction du mouvement et les variantes
La préférence prefers-reduced-motion peut signaler le souhait de réduire les animations non essentielles. Préparez une variante qui retire ou simplifie les déplacements tout en conservant les contenus et leur hiérarchie.
Sur écran étroit, la scène peut demander un recadrage, une réduction du nombre de couches ou une autre disposition. Le même déplacement en pixels n'a pas la même place dans une petite fenêtre. La version mobile doit donc être composée et observée, pas seulement héritée des paramètres d'ordinateur.
Enfin, vérifiez le coût réel du rendu avec le développement. Une animation peut être bien réglée mais irrégulière sur certains appareils. Le diagnostic doit distinguer la chorégraphie, la taille des médias et les contraintes de calcul, afin de simplifier le bon élément.
Questions fréquentes
Faut-il utiliser la 3D pour obtenir une parallaxe ?
Non. Des couches d'images peuvent être déplacées différemment pour produire une profondeur apparente. La technique dépend du rendu recherché et des contraintes. Il faut d'abord définir les plans et leur relation, puis choisir une réalisation adaptée plutôt que partir automatiquement d'une scène 3D.
Peut-on appliquer la parallaxe à du texte ?
Cela peut être envisagé pour un titre court ou une composition particulière, mais la lecture doit rester maîtrisée. Les paragraphes et les commandes demandent davantage de stabilité. Testez la possibilité de s'arrêter, de relire et de sélectionner avant de retenir ce comportement.
Comment savoir si l'amplitude est excessive ?
Observez si le mouvement prend le dessus sur le sujet, masque une information ou oblige à poursuivre un élément du regard. Comparez plusieurs amplitudes sur la même scène, puis testez le parcours complet. Le réglage doit rester cohérent avec la fonction et la durée de présence de l'effet.
Sources
Composer la profondeur avec LVX
Pour un projet LVX, nous proposons de construire la scène fixe avant de définir les déplacements. Le choix des plans, des recouvrements et du repère stable permet ensuite de tester une parallaxe précise, limitée aux moments où elle apporte une lecture de l'espace. Les versions mobiles et réduites en mouvement sont conçues dans le même cadre. Cette démarche vise une profondeur qui appartient à l'univers de marque et reste compatible avec la lecture. Le mouvement enrichit une composition déjà solide, avec des limites que le développement peut vérifier. Découvrir notre approche.
