Accueil » Comment créer un texte défilant à l’infini sur WordPress

Comment créer un texte défilant à l’infini sur WordPress

Tu veux ajouter un effet de texte défilant sur ton site WordPress pour capter l’attention de tes visiteurs ? Que ce soit pour une annonce importante, une promo ou un message dynamique, le texte qui défile à l’infini est un petit détail qui peut faire toute la différence. Bonne nouvelle : inutile d’installer un plugin, tu peux le faire facilement avec un peu de code HTML et CSS.

Voici un guide pas-à-pas pour mettre en place un texte défilant sur ton site WordPress, que tu sois débutant ou plus avancé.

Un aperçu du rendu final

Avant de rentrer dans la technique, voici un exemple visuel de ce que tu pourras obtenir sur ton site WordPress.

Ce texte va défiler de la droite vers la gauche de manière fluide et continue. Tu pourras évidemment personnaliser le contenu, les couleurs et la vitesse du défilement selon tes besoins.

Livraison gratuite à partir de 50€ - Offre valable jusqu'au dimanche soir !

Le code HTML et CSS pour un texte défilant infini sur WordPress

Voici l’exemple du code simple pour un texte qui défile de droite à gauche en boucle et inversement.

En suivant cette méthode, tu peux facilement capter l’attention de tes visiteurs sans compromettre la lisibilité de ton contenu. Et comme on dit : ce qui est fait n’est plus à faire

Animation de droite à gauche

				
					.marquee {
  overflow: hidden;
  display: flex;
}

.marquee div{
  white-space: nowrap;
}

				
					<script>
function Marquee(selector, speed) {
  const parent = document.querySelector(selector);
  const clone = parent.innerHTML;
  let i = 0;
  parent.innerHTML += clone;

  setInterval(() => {
    i += speed;
    if (i >= parent.children[0].clientWidth) i = 0;
    parent.children[0].style.marginLeft = `-${i}px`;
  }, 0);
}

window.addEventListener('load', () => Marquee('.marquee', .5));
</script>

Animation de gauche à droite

				
					.marquee2 {
  overflow: hidden;
  display: flex;
}

.marquee2 div{
  white-space: nowrap;
}

				
					<script>
function Marquee2(selector, speed) {
  const parent = document.querySelector(selector);
  const clone = parent.innerHTML;
  let i = parent.children[0].clientWidth;
  parent.innerHTML += clone + clone;
  const totalWidth = parent.children[0].clientWidth * 2;
  setInterval(() => {
    i -= speed;
    if (i <= 0) i = totalWidth;
    parent.children[0].style.marginLeft = `-${i}px`;
  }, 0);
}

window.addEventListener('load', () => Marquee2('.marquee2', .5));
</script>

Pourquoi utiliser un texte défilant sur ton site ?

Le texte défilant est un excellent moyen d’éveiller la curiosité ou de mettre en avant une information sans surcharger visuellement la page. Utilisé avec parcimonie, il attire le regard tout en ajoutant une touche de dynamisme à ton interface.

Ce type d’effet est souvent utilisé pour :

Afficher des offres promotionnelles en boucle
Mettre en avant une actu ou une info urgente
Créer un bandeau dynamique en entête ou en bas de page

Attention toutefois à ne pas en abuser, au risque de nuire à l’expérience utilisateur. Un seul bandeau bien placé suffit largement.

Où insérer le code dans WordPress ?

Si tu travailles avec Elementor, tu n’as besoin que de deux widgets pour créer cet effet :

Le widget Titre (Heading) pour afficher le texte qui défile
Le widget HTML pour insérer le script qui gère l’animation

Voici la marche à suivre :

Ajoute un widget Titre sur ta page.
Dans les options de style du widget, ouvre l’onglet Avancé > CSS personnalisé (Elementor Pro requis).
Colle le code CSS correspondant à l’effet souhaité (défilement de gauche à droite ou inversement).
Ajoute un widget HTML juste en dessous du titre.
Colle dans ce widget le code JavaScript associé au défilement.

Et voilà, ton texte commence à défiler automatiquement après le chargement de la page.

Deux variantes d’animation disponibles

Tu peux choisir entre deux directions de défilement selon l’effet souhaité :

Défilement de droite vers la gauche : effet classique de bandeau d’information.
Défilement de gauche vers la droite : moins courant, mais tout aussi visible.

Dans les deux cas, tu n’as qu’à adapter les sélecteurs CSS et les fonctions JavaScript au widget que tu utilises.

Est-ce que ça fonctionne sur mobile ?

Oui, l’effet est entièrement responsive. Il fonctionne sur tous les appareils car il repose sur des bases simples : CSS pour le style, JavaScript pour le mouvement.

Quelques conseils pour une bonne intégration mobile :

Garde un texte court et lisible
Évite les polices trop petites ou les vitesses trop rapides
Teste toujours sur plusieurs tailles d’écran

Ton message doit rester compréhensible même lorsqu’il défile.

Besoin de plugins supplémentaires ?

Non. Avec Elementor, tout est déjà intégré. En utilisant les widgets de base (Titre + HTML) et en collant un peu de code, tu obtiens le résultat sans alourdir ton site avec un plugin supplémentaire.

Cela garantit :

Une meilleure performance
Un chargement plus rapide
Une maintenance simplifiée

Moins tu ajoutes d’extensions, plus ton site reste stable et rapide.

Sommaire

Un aperçu du rendu final
Le code HTML et CSS pour un texte défilant infini sur WordPress
Pourquoi utiliser un texte défilant sur ton site ?
Où insérer le code dans WordPress ?
Deux variantes d’animation disponibles
Est-ce que ça fonctionne sur mobile ?
Besoin de plugins supplémentaires ?

À propos de moi : Victor Mailloux

Je me suis passionné pour le digital en 2020. Curieux de nature, j’ai commencé à explorer le web, puis à créer mes premiers sites en 2022, d’abord pour moi, puis rapidement pour d’autres.

Après avoir créé mes premiers sites en 2022, j’ai décidé de me former sérieusement sur WordPress, le design web et le SEO. En 2024, j’ai lancé Web Armor, une petite agence indépendante.

Mon objectif : créer des sites WordPress modernes, rapides et bien référencés, pensés pour vraiment aider les entreprises à grandir en ligne.

Audit gratuit de votre site internet

Victor Mailloux

Artisan du web

Je me suis passionné pour le digital en 2020. Curieux de nature, j’ai commencé à explorer le web, puis à créer mes premiers sites en 2022, d’abord pour moi, puis rapidement pour d’autres.

Mon objectif : créer des sites WordPress modernes, rapides et bien référencés, pensés pour vraiment aider les entreprises à grandir en ligne. il faut que ce soit court et insiste à aller me suivre sur les réseaux sociaux

Découvre d’autres articles similaires

Charger plus