Comment créer un texte qui défile à l’infini sur WordPress (sans plugin)

Épater les visiteurs dès leur première seconde sur un site WordPress, en mettant en valeur plusieurs services, un slogan accrocheur ou même un simple mot-clé, devient un jeu d’enfant.

Pour créer un texte qui défile en boucle à l’infini sur WordPress sans plugin, rien de plus simple : il suffit d’insérer un peu de code HTML et CSS, et hop, le tour est joué ! Et bonne nouvelle, je vous partage le code juste en dessous, vous n’avez plus qu’à le copier-coller pour obtenir un défilement infini en quelques clics.

Il n’est pas nécessaire d’être un expert en code, et pas de panique, ce tutoriel est super simple (même pour ceux qui ne gardent que de vagues souvenirs de leurs cours d’informatique 😉).

À quoi ressemble le texte défilant à l'infini ?

Un texte défilant capte immédiatement l’attention. C’est un effet graphique qui intrigue et donne la sensation d’un site dynamique. De nombreuses marques l’emploient pour mettre en avant des arguments clés, présenter un éventail de prestations ou transmettre un sentiment d’urgence (par exemple, “derniers jours pour profiter de notre offre !”).

Les visiteurs sont exposés en continu à un message récurrent, ce qui augmente les chances de mémorisation. Cette mise en valeur peut aussi rendre votre interface plus interactive et, si c’est bien géré, apporter un côté “premium” à l’expérience utilisateur.

NB : Pensez à vérifier que ce défilement n’entre pas en conflit avec d’autres éléments animés. Trop d’animations simultanées peuvent agacer l’utilisateur ou alourdir le design.

Voila à quoi devrait ressembler l’effet 👇

CONCEPTEUR DE SITE WEB ✦ STRATÉGIE ✦ DESIGN GRAPHIQUE ✦ IMAGE DE MARQUE ✦ UX & UI ✦ OPTIMISATION SEO ✦ CONCEPTION DE LOGO ✦ CRÉATION SITE INTERNET ✦

Aperçu du code à intégrer

Avant de rentrer dans les détails, découvrons tout de suite le code nécessaire pour réaliser un texte qui défile en boucle. Le script est scindé en deux parties :

Un bloc HTML + JavaScript à placer directement dans votre contenu ou dans un module de code personnalisé.
Un bloc CSS à coller dans la feuille de style du thème ou dans un plugin de CSS additionnel.

Le HTML/JAVASCRIPT :

				
					<div class="outer">
    <div>
        <div class="loop">
            <div class="content">CONCEPTEUR DE SITE WEB&nbsp;&nbsp;✦&nbsp;&nbsp;STRATÉGIE&nbsp;&nbsp;✦&nbsp;&nbsp;DESIGN GRAPHIQUE&nbsp;&nbsp;✦&nbsp;&nbsp;IMAGE DE MARQUE&nbsp;&nbsp;✦&nbsp;&nbsp;UX & UI&nbsp;&nbsp;✦&nbsp;&nbsp;OPTIMISATION SEO&nbsp;&nbsp;✦&nbsp;&nbsp;CONCEPTION DE LOGO&nbsp;&nbsp;✦&nbsp;&nbsp;CRÉATION SITE INTERNET&nbsp;&nbsp;✦&nbsp;</div>
        </div>
    </div>
</div>

<script>
document.querySelectorAll('.outer').forEach(el => {
    let content = el.querySelector('.content');

    repeatContent(content, el.offsetWidth);

    let slider = el.querySelector('.loop');
    slider.innerHTML = slider.innerHTML + slider.innerHTML;
});

function repeatContent(el, till) {
    let html = el.innerHTML;
    let counter = 0; 
    while (el.offsetWidth < till && counter < 100) {
        el.innerHTML += html;
        counter += 1;
    }
}
</script>

Le CSS :

				
					.content {
    font-family: "Inter", sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #111111;
    padding-left: 0.25em;
}

@media only screen and (max-width: 767px) {
    .content {
        font-size: 2rem !important;
        padding-left: 0.25em;
    }
}

.outer {
    overflow: hidden !important;
}

.outer div {
    display: inline-block;
}

.loop {
    white-space: nowrap;
    animation: loop-anim 35s linear infinite;
}

@media only screen and (max-width: 767px) {
    .loop {
        animation: loop-anim 35s linear infinite;
    }
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50%;
    }
}

g.flo, c’est moi, Florian GEFFROY

Un créateur passionné et un stratège digital qui transforme vos idées en expériences mémorables. Plus qu’un simple nom, g.flo est un concept audacieux : un jeu de mots qui signifie “j’ai Flo” — g.un site web, g.une image de marque, g.une stratégie unique.

Avec g.flo, vous avez :

✔ Un design sur-mesure qui incarne l’ADN de votre marque
✔ Une expérience fluide et engageante pour captiver vos visiteurs
✔ Les dernières tendances UX/UI intégrées à votre projet
✔ Une réalisation efficace et soignée, sans compromis sur la qualité

Prêt à dire « g.flo » vous aussi ?
Testez mon simulateur de devis interactif et obtenez en moins d’une minute une estimation personnalisée pour votre futur site.

Comment intégrer le code sur WordPress

Ajouter le bloc HTML/JS dans la bonne section

Créez ou éditez la page dans laquelle vous voulez insérer l’animation.
Dans l’éditeur Elementor, sélectionnez le widget « HTML”.
Collez le code fourni (HTML + <script>).

Conseil pratique : Pour ne pas casser votre mise en page, insérez le script dans un bloc distinct. Assurez-vous qu’aucun plugin de sécurité ne bloque les balises <script>. Certains filtrent le contenu pour éviter l’injection de code malveillant.

Insérer le CSS

Vous avez plusieurs solutions pour injecter le CSS dans WordPress :

Style.css du thème enfant : Dans votre Apparence > Éditeur de thème, recherchez la feuille style.css. Collez les règles en bas du fichier.
Plugin de CSS personnalisé : Si vous utilisez un constructeur ou un plugin dédié (par ex. “Simple Custom CSS and JS” ou “Code Snippets”), collez le code dans la partie réservée à la feuille de style.
Customiser via l’interface : Rendez-vous dans Apparence > Personnaliser > CSS additionnel, puis collez le CSS.

Ajuster l’effet et personnaliser le contenu

Le principal avantage de réaliser un texte qui défile à l’infini sur WordPress grâce à HTML, CSS et JavaScript réside dans la flexibilité. Vous pouvez tout modifier :

Changer la durée de l’animation (35s) pour accélérer ou ralentir le flux.
Adapter la taille de la police (font-size) afin de préserver la lisibilité.
Remplacer le texte dans la <div class= »content »> par vos propres mots-clés, slogans ou un défilé de services.
Choisir la couleur (color: #111111;) pour l’harmoniser avec votre charte graphique.

Idée bonus : Ajoutez des icônes ou des émojis pour rythmer le défilement. Les symboles ✦ ou ➜, par exemple, séparent visuellement vos messages et créent un style moderne.

Points de vigilance

Bien que le script fonctionne sur la plupart des navigateurs, quelques éléments méritent une attention particulière.

Compatibilité mobile : Vérifiez le rendu sur un smartphone. Une police trop grande peut déborder, rendant la lecture compliquée.
Performances : L’animation doit rester fluide. Testez votre site sur différents appareils et surveillez le temps de chargement.
Lisibilité du message : Trop d’informations dans un flux continu risquent de gêner la compréhension. Mieux vaut rester concis et percutant.
Accessibilité : Un texte en mouvement peut poser problème pour certains utilisateurs. Pour limiter l’inconfort, réservez cette animation à un encart secondaire et évitez de véhiculer des informations vitales uniquement via un élément défilant.

Remarque : Certains thèmes WordPress proposent des options d’animations intégrées. Comparez ce script avec les fonctionnalités natives de votre template. Vous n’aurez peut-être pas besoin de tout développer à la main.

Quelques problèmes courants et comment les résoudre

Le défilement ne s’affiche pas :
- Vérifiez si le script JavaScript est bien autorisé (pas bloqué par un plugin de sécurité).
- Contrôlez que le sélecteur .outer .content existe bel et bien dans votre code.
L’animation est trop rapide ou saccadée :
- Modifiez la durée dans animation: loop-anim 35s linear infinite;.
- Retestez sur divers écrans pour trouver le bon équilibre entre vitesse et fluidité.
Le texte défile, mais s’arrête en cours de route :
- Vérifiez la propriété margin-left: -50%; dans les keyframes. Ajustez cette valeur si votre contenu est trop long ou trop court.
- Assurez-vous que la duplication du contenu dans le script a bien lieu.

Conseil pratique : Une fois le script en place, testez votre page avec un outil de responsive design (par exemple, l’inspecteur de Google Chrome). Assurez-vous que la transition se comporte bien en mode mobile.

Conclusion

Pour réaliser un texte qui défile à l’infini sur WordPress grâce à HTML, CSS et JavaScript, il suffit de suivre quelques étapes simples. Copiez le code, insérez-le dans votre page ou votre article, ajoutez le CSS dans votre feuille de style et adaptez le script à vos besoins. L’effet obtenu crée un flux visuel continu, retient l’attention et ajoute une touche de modernité à votre design.

Prenez néanmoins le temps de peaufiner la vitesse de défilement, la taille du texte et la compatibilité sur mobile. Un petit détail visuel peut faire la différence et donner une impression de site “haut de gamme.” Pour un impact encore plus fort, pensez à l’harmoniser avec votre identité graphique et vos objectifs marketing.

Si vous visez un rendu professionnel qui raconte votre histoire et distingue votre marque, je reste disponible pour vous guider dans cette démarche. Chaque élément d’un site web a son rôle à jouer pour marquer les esprits, et cette animation infinie n’est qu’un point de départ. Osez sortir des sentiers battus et offrir à vos visiteurs une expérience qui leur donnera le sourire dès les premières secondes.

Comment créer un texte qui défile à l’infini sur WordPress (sans plugin)

À quoi ressemble le texte défilant à l'infini ?