20. Animations et interactions

Une page qui bouge attire l’œil ; une page qui bouge trop le fatigue. Ce dernier chapitre de la partie « Contenu et style » présente les deux systèmes d’animation d’Elementor, l’onglet Interactions des éléments atomiques et les Effets de mouvement des widgets classiques, puis fixe des règles simples pour que le mouvement serve la lecture au lieu de la gêner.

En bref

Public: Toute personne tentée d’animer sa page d’accueil, c’est-à-dire tout le monde à ce stade.
Enjeu: Utiliser le mouvement avec parcimonie, sans nuire à la lisibilité, à l’accessibilité ni à la vitesse.
Idée clé: Une animation réussie est courte, rare et invisible une fois terminée.
Prérequis: Chapitres 12 (responsive), 17 (transitions) et 18 (états).
Lecture: Environ 13 minutes (+ 20 minutes d’exercice).

20.1 — Pourquoi peu, et pourquoi bien

Le mouvement est le signal le plus fort qu’une page puisse envoyer : l’œil y réagit avant même de lire. C’est précisément ce qui le rend dangereux, pour trois raisons.

La lisibilité, d’abord : un titre qui glisse, un paragraphe qui apparaît en fondu, trois cartes qui rebondissent, et le visiteur attend que tout se calme avant de lire ; sur une page longue, il finit par défiler plus vite que les animations ne se déclenchent et voit des zones vides. L’accessibilité, ensuite : certaines personnes souffrent de troubles vestibulaires ou d’une sensibilité au mouvement ; les systèmes d’exploitation proposent un réglage de réduction des animations, mais rien ne garantit que toutes les animations d’une page en tiennent compte. La performance, enfin : les effets liés au défilement et les animations continues occupent le processeur du téléphone du visiteur, et sur un appareil modeste la page saccade.

Méthode

Cinq règles, valables pour tout ce qui suit : une durée de 300 à 600 ms pour une apparition, 200 à 300 ms pour un survol ; une seule animation par écran, c’est-à-dire par section visible à la fois ; jamais sur le texte principal (titre H1, paragraphes de contenu) ; des délais en cascade de 100 à 150 ms au maximum entre éléments d’une même ligne ; un test sur un vrai téléphone avant publication.

Si le visiteur remarque l’animation, elle est déjà trop longue.

20.2 — L’onglet Interactions des éléments atomiques

Chaque élément atomique possède, à côté de Général et Style, un troisième onglet, Interactions. Il est vide au départ ; le bouton Créer une interaction (Create an interaction), ou le signe +, ajoute une interaction, et l’on peut en empiler plusieurs sur un même élément. Chaque interaction se décrit par quelques champs.

Le Déclencheur (Trigger) dit quand l’animation démarre. En version gratuite, un seul est disponible : le chargement de la page (Page load), qui lance l’animation dès l’affichage. Elementor Pro (depuis Pro 4.0) en ajoute quatre : Défilement à l’écran (Scroll into view : l’animation démarre quand l’élément entre dans la zone visible), Pendant que vous faites défiler (While scrolling : l’animation progresse avec le défilement, entre une ligne de début et une ligne de fin placées sur la toile), Au survol (On hover) et Au clic (On click).

L’Effet (Effect) dit ce qui se passe : Fondu (Fade, l’opacité varie), Diapositive (Slide, l’élément glisse depuis une direction) ou Redimensionner (Scale, l’élément grandit ou rétrécit) ; Pro ajoute un effet personnalisé (Custom). Le Type précise s’il s’agit d’une entrée (In) ou d’une sortie (Out) ; la Direction s’applique aux effets qui en ont une ; la Durée (Duration) et le Délai (Delay) se règlent en millisecondes. En Pro, enfin, une interaction peut être réglée différemment selon le point de rupture, ce qui permet de la désactiver sur mobile.

Sélectionnez l’élément à animer : sur la page d’accueil, le Bloc Div de la carte « Escaliers » (classe carte).
Ouvrez l’onglet Interactions et cliquez sur Créer une interaction.
Choisissez le déclencheur : chargement de la page en version gratuite ; Défilement à l’écran si vous disposez de Pro, préférable pour un élément situé sous le bandeau.
Choisissez l’effet Fondu, type entrée, durée 500 ms, délai 0.
Enregistrez et ouvrez l’Aperçu. La carte apparaît en fondu. Si vous ne voyez rien, l’animation s’est probablement jouée avant que vous ayez défilé jusqu’à la carte : voyez l’encadré ci-dessous.

Attention

Le déclencheur « chargement de la page » ne se soucie pas de savoir si l’élément est visible. Pour un élément placé bas dans la page, l’animation se joue pendant que le visiteur regarde encore le bandeau ; quand il arrive à l’élément, tout est terminé et il ne voit rien. En version gratuite, réservez donc les interactions atomiques aux éléments du premier écran, et animez le reste avec les Effets de mouvement des widgets classiques (section 20.3), ou pas du tout. En Pro, utilisez Défilement à l’écran.

Interactions des éléments atomiques	Gratuit	Pro
Déclencheur : chargement de la page (Page load)	✓	✓
Déclencheur : Défilement à l’écran (Scroll into view)	—	✓
Déclencheur : Pendant que vous faites défiler (While scrolling), avec lignes de début et de fin	—	✓
Déclencheurs : Au survol, Au clic	—	✓
Effets Fondu, Diapositive, Redimensionner ; type entrée / sortie ; direction	✓	✓
Durée et délai en millisecondes	✓	✓
Effet personnalisé (Custom)	—	✓
Réglage différent par point de rupture (désactiver sur mobile)	—	✓
Widgets classiques : animation d’entrée, animation au survol	✓	✓
Widgets classiques : effets de défilement, effets de souris, position collante	—	✓

Elementor Pro

Les déclencheurs au défilement, au survol et au clic, l’effet personnalisé et le réglage par point de rupture sont arrivés avec Elementor Pro 4.0 et restent réservés à la version Pro (Centre d’aide Elementor, page « Interactions »). Pour un site vitrine, le seul qui change vraiment la donne est Défilement à l’écran : il rend enfin utile l’animation d’un élément situé sous le premier écran.

20.3 — Widgets classiques : Effets de mouvement et animation au survol

Les widgets classiques n’ont pas d’onglet Interactions ; leurs animations se règlent dans l’onglet Avancé, section Effets de mouvement (Motion Effects). En version gratuite, on y trouve l’animation d’entrée (Entrance Animation), choisie dans une longue liste classée par familles (fondus, zooms, glissements, rebonds, rotations…), avec une durée à trois vitesses (lente, normale, rapide) et un délai en millisecondes. Contrairement au déclencheur de chargement de page des éléments atomiques, l’animation d’entrée d’un widget classique se joue quand le widget entre dans la zone visible, ce qui la rend utilisable sur toute la hauteur de la page.

Elementor Pro ajoute dans la même section les effets de défilement (Scrolling Effects : déplacement, transparence, flou, rotation, échelle liés à la position de défilement), les effets de souris (Mouse Effects : l’élément suit le curseur ou s’incline en trois dimensions) et la position collante (Sticky), qui fait tenir un élément en haut ou en bas de l’écran pendant le défilement. Les deux premiers relèvent de la page de démonstration plus que du site d’artisan ; le troisième est utile pour un en-tête, et l’Éditeur atomique l’obtient sans Pro par la position collante de la section Position (chapitre 10).

Plusieurs widgets proposent aussi une animation au survol (Hover Animation) dans leurs propres réglages : le widget Image dans son onglet Style, le widget Bouton dans son onglet Contenu, avec des effets tels que grossir, rétrécir, pulser ou rebondir. Choisissez, s’il le faut, le plus discret, et le même pour tout le site.

À éviter

Un titre en « rebond », trois cartes en « rotation d’entrée », une image qui suit la souris, un bouton qui pulse en permanence et un bandeau à effet de défilement. Chaque effet, seul, amuse trente secondes ; ensemble, ils disent « site fait en une soirée ».

À faire

Le bandeau apparaît en fondu au chargement, les trois cartes de prestations apparaissent en fondu quand on arrive dessus, en cascade de 150 ms, et tout ce qui est interactif réagit au survol par un état et une transition de 250 ms. Rien d’autre.

20.4 — Le survol « gratuit » : état et transition

Une confusion fréquente mérite d’être levée. Le déclencheur Au survol de l’onglet Interactions (Pro) lance une animation quand la souris arrive sur l’élément : un fondu, un glissement, un changement d’échelle animé. L’état Au survol du chapitre 18 décrit simplement une autre apparence de l’élément (couleur, ombre, échelle, bordure), et la transition du chapitre 17 rend le passage progressif. Pour un bouton qui fonce, une carte qui se soulève, un lien qui se souligne, la seconde méthode suffit, en version gratuite, et elle est plus légère : c’est du CSS pur, exécuté par le navigateur sans aucun script. Réservez l’interaction au survol, si vous avez Pro, aux cas où il faut vraiment un mouvement, par exemple faire apparaître une légende sur une photo de réalisation.

Bonne pratique

Sur un téléphone, il n’y a pas de survol : le doigt touche ou ne touche pas. Tout ce qui n’est visible qu’au survol (une légende, un bouton, un prix) est donc invisible pour la majorité des visiteurs d’un site local. Le survol ne doit jamais porter une information indispensable ; il ne fait qu’enrichir ce qui est déjà lisible.

20.5 — Avant de publier : la checklist du mouvement

Passez ces points en revue sur chaque page animée, sur ordinateur puis sur un vrai téléphone. Une page qui ne coche pas tout doit perdre une animation, pas en gagner une.

Aucune animation ne dure plus de 600 ms, aucun survol plus de 300 ms.
Aucun titre H1, aucun paragraphe de contenu, aucun formulaire n’est animé.
Une seule animation par écran ; les cascades restent sous 150 ms d’écart et ne dépassent pas quatre éléments.
En version gratuite, les éléments situés sous le premier écran ne dépendent pas du déclencheur de chargement de page.
Aucune information n’est réservée au survol.
Sur mobile, la page reste fluide au défilement ; en Pro, les interactions inutiles y sont désactivées par point de rupture.
Après l’animation, chaque élément est exactement à sa place, sans décalage résiduel.

À savoir

Les interactions et les effets de mouvement ne se voient pas dans la toile de l’éditeur comme sur la page réelle. Vérifiez toujours avec le bouton Aperçu, puis en rechargeant la page publiée sur votre téléphone : c’est la seule façon de constater qu’une animation se joue au bon moment et ne saccade pas.

Exercice 20.1 — Trois cartes en cascade 20 min

Objectif : faire apparaître en fondu les trois cartes de prestations de la page d’accueil avec un délai croissant, vérifier leur survol et contrôler le résultat sur téléphone.

Ouvrez la page « Accueil » et sélectionnez la carte « Escaliers ». Onglet Interactions › Créer une interaction : déclencheur chargement de la page (ou Défilement à l’écran en Pro), effet Fondu, type entrée, durée 500 ms, délai 0.
Répétez sur la carte « Cuisines » avec un délai de 150 ms, puis sur « Agencements » avec 300 ms.
Vérifiez que les trois cartes portent la classe carte du chapitre 18, dont l’état Au survol soulève la carte avec une transition de 250 ms : aucune interaction Au survol n’est nécessaire.
Enregistrez, ouvrez l’Aperçu et rechargez : les cartes doivent apparaître l’une après l’autre en moins d’une seconde au total, puis réagir au survol.
Si les cartes sont sous le premier écran et que vous êtes en version gratuite, rechargez puis défilez lentement. Si l’animation est déjà terminée à votre arrivée, retirez-la ou remplacez ces cartes par des Boîtes d’icône classiques avec une animation d’entrée « fondu » et les mêmes délais.
Ouvrez la page publiée sur votre téléphone : le défilement doit rester fluide et les cartes lisibles sans survol. En Pro, désactivez l’interaction en vue mobile depuis l’onglet Interactions.

Résultat attendu : trois cartes qui apparaissent en cascade de 0, 150 et 300 ms, un survol fluide sur ordinateur, et une page mobile sans saccade où toute l’information est lisible sans interaction.

À retenir

Le mouvement se justifie par la lecture : 300 à 600 ms, une animation par écran, jamais sur le texte principal, test sur téléphone.
Les éléments atomiques s’animent dans l’onglet Interactions : déclencheur, effet (Fondu, Diapositive, Redimensionner), type, direction, durée, délai.
En gratuit, le seul déclencheur est le chargement de la page, qui ne convient qu’au premier écran ; Pro ajoute Défilement à l’écran, le défilement continu, le survol, le clic, l’effet personnalisé et le réglage par point de rupture.
Les widgets classiques s’animent dans Avancé › Effets de mouvement : animation d’entrée gratuite, jouée à l’entrée dans l’écran ; effets de défilement, de souris et position collante en Pro.
Pour un survol, l’état d’une classe et une transition suffisent presque toujours, sans Pro et sans script ; le survol n’existe pas sur téléphone et ne doit porter aucune information indispensable.