Le brief du client était simple sur le papier : « un effet un peu vivant » sur l’image de fond de la page d’accueil, sans qu’il puisse préciser davantage. Ce genre de demande floue mène trop souvent à un parallax agressif qui donne le mal de mer sur mobile. Les Motion Effects d’Elementor permettent d’obtenir un rendu subtil, à condition de comprendre ce que chaque réglage fait réellement au niveau du navigateur, plutôt que de pousser les curseurs au hasard jusqu’à obtenir un rendu qui plaît en desktop.
La section Motion Effects se trouve dans l’onglet Avancé de n’importe quelle section ou colonne Elementor. Elle propose plusieurs types de mouvement déclenchés par le défilement : translation, rotation, opacité, mise à l’échelle et flou. Combiner plusieurs effets sur un même élément semble tentant mais dégrade rapidement la fluidité, chaque effet ajoutant un calcul de position au scroll listener.
Le réglage qui fait toute la différence : la vitesse
Le paramètre Speed contrôle le ratio entre le défilement réel de la page et le déplacement de l’élément. Une valeur à 1 déplace l’élément à la même vitesse que le scroll, ce qui annule tout effet perceptible. Les valeurs entre 2 et 3 donnent un effet de profondeur discret et suffisant pour la plupart des cas. Au-delà de 4, le décalage devient trop marqué et, combiné à un appareil mobile avec un taux de rafraîchissement irrégulier, produit des saccades visibles pendant le défilement rapide.
Étapes pour un parallax propre sur l’image héro
- Sélectionner la section contenant l’image de fond, onglet Avancé, section Motion Effects
- Activer Scrolling Effects, choisir Vertical Scroll comme type d’effet
- Régler Speed sur une valeur entre 2 et 3, jamais au-delà
- Dans Viewport, restreindre le déclenchement à la zone visible de l’écran uniquement
- Passer en aperçu responsive et désactiver totalement l’effet sur le breakpoint mobile via le sélecteur de device en haut de chaque champ
- Tester le défilement rapide au trackpad, pas seulement à la molette, pour repérer les à-coups
Pourquoi désactiver sur mobile plutôt que ralentir
Sur mobile, le rendu du parallax dépend du moteur de scroll du navigateur, souvent moins optimisé que sur desktop, en particulier sur Android bas de gamme. Réduire simplement la vitesse ne suffit pas toujours à éliminer les saccades : le calcul de position à chaque frame de défilement reste coûteux. La solution la plus fiable consiste à désactiver complètement l’effet en dessous du breakpoint tablette, via l’icône responsive qui accompagne chaque champ Elementor, plutôt que de chercher un compromis de vitesse qui ne satisfera personne.
Le Viewport, un réglage souvent ignoré
Le paramètre Viewport définit la zone de l’écran où l’effet se déclenche, exprimée en pourcentage depuis le haut et le bas de la fenêtre visible. Le laisser à ses valeurs par défaut (0 % à 100 %) fait démarrer l’effet dès que l’élément entre dans le viewport, ce qui est correct pour une image héro visible dès le chargement. Pour un élément plus bas dans la page, restreindre le viewport à une plage plus étroite (par exemple 20 % à 80 %) évite un déclenchement prématuré qui donne une impression de saut visuel au premier défilement.
- Ne jamais cumuler plus de deux effets Motion sur le même élément
- Toujours tester sur un appareil physique, l’aperçu responsive de l’éditeur ne reproduit pas les saccades réelles
- Vérifier l’impact sur le score Core Web Vitals, en particulier le Cumulative Layout Shift si l’effet modifie une dimension
Un parallax que le client ne remarque pas consciemment mais qui rend la page plus agréable a mieux rempli son rôle qu’un effet spectaculaire qui provoque des saccades sur la moitié du trafic mobile.
En résumé
Les Motion Effects d’Elementor permettent un rendu de parallax convaincant sans bibliothèque JavaScript tierce, à condition de garder une vitesse modérée, de restreindre le viewport de déclenchement et de désactiver systématiquement l’effet sur mobile. Le brief flou du client, dans ce projet, a finalement été satisfait avec un effet à peine perceptible en vitesse 2, salué justement parce qu’il ne se remarquait pas au premier regard.
