Tu veux ajouter un effet interactif et dynamique à ton site WordPress ?
Le bandeau défilant au passage de la souris est une excellente façon de rendre ton site plus vivant et moderne, sans toucher une seule ligne de code.
Dans cet article, je te guide pas à pas pour créer ce type d’animation avec Elementor, et je te donne des conseils pour le rendre fluide, lisible et esthétiquement agréable.
Tu peux aussi regarder le tuto vidéo juste ici 👇
SOMMAIRE
C’est quoi un bandeau défilant au passage de la souris ?
Un bandeau défilant au passage de la souris est un texte (ou une série d’éléments) qui bouge horizontalement lorsque l’utilisateur passe sa souris dessus.
Contrairement au bandeau défilant au scroll, ici le mouvement est déclenché par le survol de la souris.
Cela crée un effet interactif subtil qui :
attire l’attention sur ton message,
rend ton site plus moderne,
et améliore l’expérience utilisateur grâce au feedback visuel.
Petit conseil : garde ton texte concis pour que le mouvement reste lisible et fluide, surtout sur les petits écrans.
Étape 1 : Créer une nouvelle section
Commence par ajouter une nouvelle section sur ta page Elementor.
Définis la hauteur de la section selon ton design, par exemple 70 px.
Dans l’onglet Style, applique :
un fond (un dégradé ou une couleur unie),
une bordure fine en haut et en bas (1 px par exemple) pour bien encadrer ton bandeau.
Cette étape permet de préparer un conteneur esthétique et bien visible pour ton animation.
Étape 2 : Ajouter le texte ou les éléments à animer
Tu as deux options :
Widget Titre : idéal pour une phrase ou un slogan.
Widget Liste d’icônes : pratique si tu veux animer plusieurs éléments alignés.
Pour notre exemple :
Ajoute un widget Titre.
Tape ton texte principal et duplique-le plusieurs fois si tu veux un bandeau continu.
Configure l’alignement horizontal pour que les textes soient côte à côte, et non empilés.
Dans l’onglet Style, choisis :
la couleur du texte,
l’espacement entre les éléments,
le style général (typographie, graisse, etc.).
Astuce : moins il y a de texte trop long, plus le défilement sera fluide et lisible.
Étape 3 : Préparer le mouvement
Avant de créer l’effet de survol, il faut positionner correctement le texte :
Va dans l’onglet Avancé → Marges.
Décoche “Lier les valeurs ensemble” et mets :
-1000 pxà gauche-1000 pxà droite
Cela permet au texte de dépasser les limites de la section et de préparer le mouvement horizontal.
Assure-toi que le conteneur est aligné automatiquement et que la largeur est 100 % pour un rendu propre.
Étape 4 : Créer l’animation au passage de la souris
Voici l’étape clé pour déclencher le mouvement au survol :
Sélectionne ton widget texte (pas la section entière).
Va dans Effets de vue et active Effet de défilement.
Ensuite, dans Transformer → Survol :
Choisis Décalage X.
Mets une valeur, par exemple
200 px.Ajuste la durée de transition pour un effet fluide, par exemple
2000 ms.
Astuce : tester différentes valeurs pour le décalage et la durée permet d’obtenir un aller-retour naturel et agréable.
Vérifie le rendu et ajuste si nécessaire :
vitesse trop rapide → augmente la durée,
texte trop petit → ajuste la typographie,
texte trop long → supprime ou raccourcis certains éléments.
Étape 5 : Ajustements et finitions
Déplace le widget pour le placer dans le contexte de la page.
Teste le rendu sur desktop, tablette et mobile.
Ajuste les marges, typographies et longueur du texte pour que l’animation reste lisible.
Publie la page et profite de ton bandeau interactif !
Bonus : tu peux combiner cet effet avec d’autres animations Elementor, comme un fade-in ou un zoom, pour plus de dynamisme.
Créer un bandeau défilant au passage de la souris avec Elementor, c’est :
Ajouter une section dédiée et bien la styliser.
Ajouter et dupliquer ton texte ou tes icônes.
Positionner le texte avec des marges négatives pour dépasser le conteneur.
Activer l’effet de survol avec transform → décalage X et régler la durée.
Tester et ajuster le rendu sur tous les appareils.
Le résultat ? Un effet moderne, interactif et totalement sans code, parfait pour donner de la vie à ton site WordPress
