Softonic

Générateur de texte défilant

Étape 1 / 2
Suivant

Les titres défilants sont la manière dont les barres d’annonce, les tickers boursiers et les bannières d’événements transmettent beaucoup d’informations sur une bande étroite de l’écran. Ce générateur recrée l’effet classique HTML <marquee> avec une animation CSS @keyframes et transform: translateX() pures, de sorte que la technique continue de fonctionner dans tous les navigateurs modernes sans la balise obsolète. Choisissez un message, ajustez la vitesse en secondes par boucle, définissez les couleurs et la taille de la police, et prévisualisez le ticker en direct avant de le reconstruire avec le CSS indiqué ci-dessous.

Comment créer une bannière défilante

  1. 1

    Tapez le message

    Entrez le titre. Des lignes courtes (4-10 mots) se lisent mieux sur une bande en mouvement.

  2. 2

    Choisissez la vitesse

    Moins de secondes = défilement plus rapide. 30-60 s par boucle complète fonctionne pour les tickers de style actualités.

  3. 3

    Définissez les couleurs et la taille

    Choisissez un premier plan pour le texte, un arrière-plan pour la bande, et une taille de police qui correspond à la hauteur de votre en-tête.

  4. 4

    Aperçu en direct

    La démo s'anime en temps réel afin que vous puissiez juger de la lisibilité avant de publier.

  5. 5

    Reconstruisez-le en CSS

    Copiez le motif `@keyframes` et `transform: translateX()` indiqué ci-dessous dans votre propre feuille de style pour reproduire le ticker sur votre site.

Pourquoi l’animation CSS au lieu de <marquee>

La balise <marquee> a été dépréciée dans HTML5 et est signalée par WHATWG comme obsolète. Les navigateurs continuent de l’afficher pour l’instant, mais les outils d’accessibilité et les validateurs se plaignent, et vous perdez un contrôle fin sur l’adoucissement et la boucle. Une animation transform: translateX() à l’intérieur de overflow: hidden donne un comportement visuel identique avec des outils modernes.

Ajustement de la vitesse

Le temps de traversée dépend à la fois de la durée et de la largeur totale. Une règle approximative pour un viewport de 1200 px :

Durée Sensation Utilisation typique
10-20 s Rapide, attention Ventes flash, alertes urgentes
30-45 s Ticker d’actualités Scores en direct, barres de titres
60-90 s Ambiant Signalisation de lieu, salles de conférence
120 s + À peine en mouvement Bannières décoratives, marques de luxe

Liste de contrôle d’accessibilité

  • Enveloppez la bande dans role="marquee" ou aria-live="off" afin que les lecteurs d’écran ne réannoncent pas le message à chaque boucle.
  • Respectez le mouvement réduit avec @media (prefers-reduced-motion: reduce) { animation: none; } et montrez le texte de manière statique.
  • Gardez un rapport de contraste d’au moins 4.5:1 entre le texte et l’arrière-plan ; le texte en mouvement est plus difficile à lire que le texte statique.
  • Ne mettez jamais d’informations critiques (avis légaux, prix, messages d’erreur) uniquement à l’intérieur d’une bande défilante.

Questions fréquentes

Non. L’aperçu est un <div> avec overflow: hidden et une animation CSS @keyframes qui déplace le span intérieur avec translateX. Cela valide comme HTML5 moderne.

Ajoutez animation-play-state: paused sur le sélecteur de survol du conteneur. Certains utilisateurs trouvent cela plus convivial qu’une boucle constante.

Oui. Changez la valeur de fin de @keyframes de translateX(-100%) à translateX(100%) et commencez à partir de -100% pour inverser la direction. Utile pour les langues RTL.

Non. Les transformations CSS s’exécutent sur le GPU et le texte est du HTML simple à l’intérieur du DOM, donc les robots d’exploration le lisent normalement et l’animation ne bloque pas le thread principal.

Tout reste dans votre navigateur pendant que vous prévisualisez. Rien n’est téléchargé ou enregistré.

Outils similaires

Générateur de noms de villes

Générez des noms fictifs de villes, bourgs, villages et capitales pour le worldbuilding, les cartes, les jeux, les récits et les données factices, avec de courtes notes pour chaque résultat.

Symbole inférieur ou égal

Copiez le signe ≤ et les symboles de comparaison mathématique associés. Inclut Unicode, entités HTML et balisage LaTeX pour les tableurs, articles et pages web.

Symboles de flèches à copier

Copiez des flèches Unicode courantes en un clic : droites, doubles, diagonales, à crochet, circulaires et triangulaires pour documents, messageries et designs.

Générateur de noms aléatoires

Générez jusqu'à 50 noms aléatoires en une série à partir de pools équilibrés, courts ou internationaux. Choisissez des noms complets, des prénoms seuls ou un prénom avec initiale.

Convertisseur de texte adapté à la dyslexie

Reformatez le texte collé en paragraphes courts et en lignes d'environ 72 caractères pour une lecture plus facile. Copiez le résultat dans n'importe quel document, e-mail ou éditeur.

Résolveur d'anagrammes

Saisissez jusqu'à 10 lettres et voyez chaque arrangement unique, avec les permutations en double supprimées et la liste limitée à 200 résultats.

Outil disponible dans d’autres langues