Remplacement HTML marquee

Alternative moderne à marquee: texte défilant CSS + générateur

`<marquee>` est obsolète, peu accessible et peu fiable selon les navigateurs modernes.

Utilisez CSS pour un défilement simple, puis le générateur pour export GIF/WebM ou overlay transparent.

Pourquoi `<marquee>` est obsolèteExemple CSS keyframesWorkflow export via générateur

Construisez un remplacement marquee directement ici

Ajustez texte, vitesse, direction et style, puis exportez ou intégrez sans quitter la page.

Aperçu = exportHorizontal / Vertical / InclinéFond transparent ou uniGIF · WebM · Intégration web
Tapez votre texte défilant ici (multi‑ligne, emojis ok) 🎉 Passez en mode horizontal/vertical/incliné, ajustez vitesse, couleurs et fond. Ce que vous voyez en aperçu est exactement ce que vous exportez.

Modeles

Appliquez un style en un clic, puis ajustez manuellement.

Configurations cloud (Pro)

Sauvegardez et rechargez des instantanés complets du générateur. Réservé aux utilisateurs Pro.

Texte & style

Multi‑ligne, emojis ; police, couleurs, fond, espacement, alignement

2597 caractères restants

Enter = nouvelle ligne ; en mode vertical/générique, les lignes sont respectées.

Découper par lignes vides ou ajouter des blocs ; réordonner librement

40px

Le transparent affiche un damier en aperçu ; la transparence à l’export dépend du format cible (ex. WebM, certains GIF).

1.60

Évitez un texte tassé en mode vertical/générique.

L’alignement s’applique aux modes vertical/incliné. Le bandeau horizontal est sur une seule ligne.

Défilement & durée

Direction, mode, vitesse, boucle/une fois, réglages d’inclinaison

Est. 5.3s
Moyenne
Très lenteMoyenneRapideTrès rapide

Les GIF bouclent par défaut ; la vidéo peut boucler N fois ou viser une durée.

Durée estimée : avec le contenu, le trajet et la vitesse actuels, comptez environ 5.3s pour un passage.

Pourquoi `<marquee>` a été déprécié ?

`<marquee>` n'est pas adapté aux pratiques web modernes: contrôle limité, mauvaise accessibilité et faible maintenabilité. Les animations CSS offrent un contrôle propre et durable.

Alternative CSS moderne

Le schéma standard est `@keyframes` + `animation` dans un conteneur `overflow: hidden`. Vous contrôlez rythme, direction et adaptation aux préférences de mouvement réduit.

Snippet HTML/CSS de texte défilant

Copiez ce bloc pour remplacer un ancien marquee.

<div class="marquee-wrap">
  <p class="marquee-text">Your scrolling text goes here</p>
</div>

<style>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: #111;
    color: #fff;
    padding: 8px 0;
  }

  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>

Quand utiliser le générateur plutôt que du CSS manuel

Le générateur est idéal pour preview exacte, export transparent, crédits longs, perspective et snippets embed réutilisables.

FAQ alternative marquee

Réponses rapides sur migration, accessibilité et export.

`<marquee>` fonctionne-t-il encore ?

Parfois, mais ce n'est plus une base fiable pour un produit moderne.

Comment mettre en pause au survol ?

Utilisez `animation-play-state: paused` sur l'élément animé au hover.

Comment gérer `prefers-reduced-motion` ?

Désactivez ou ralentissez l'animation dans la media query dédiée.

Quand exporter en GIF/WebM ?

Quand vous avez besoin d'un rendu fixe pour montage, réseaux sociaux ou diffusion live.

Prêt à remplacer votre ancien marquee ?

Lancez le générateur pour un résultat propre et adapté à la production.