Sostituto HTML marquee

Alternativa moderna al marquee: testo scorrevole CSS + generatore

`<marquee>` è obsoleto, poco accessibile e non affidabile nei browser moderni.

Per casi semplici usa CSS; per export trasparente e workflow completi usa il generatore.

Perché `<marquee>` è obsoletoEsempio CSS keyframesWorkflow export con generatore

Crea un'alternativa marquee direttamente qui

Regola testo, velocità, direzione e stile, poi esporta o incorpora senza cambiare pagina.

Anteprima = exportOrizzontale / Verticale / InclinatoSfondo trasparente o pienoGIF · WebM · Embed web
Scrivi qui il testo scorrevole (multi‑riga, emoji ok) 🎉 Passa tra modalità orizzontale/verticale/inclinata, regola velocità, colori e sfondo. Quello che vedi in anteprima è esattamente ciò che esporti.

Template

Applica uno stile con un clic, poi continua con modifiche manuali.

Configurazioni cloud (Pro)

Salva e ricarica snapshot completi del generatore. Disponibile solo per utenti Pro.

Testo & stile

Multi‑riga, emoji; font, colori, sfondo, spaziatura, allineamento

Restano 2597 caratteri

Enter = nuova riga; in verticale/crediti le righe vengono rispettate.

Dividi per righe vuote o aggiungi blocchi; riordina liberamente

40px

Il trasparente mostra una scacchiera in anteprima; la trasparenza in export dipende dal formato (es. WebM, alcuni GIF).

1.60

Evita righe troppo strette in verticale/crediti.

L’allineamento si applica a verticale/inclinato. Il marquee orizzontale è su una sola riga.

Scorrimento & durata

Direzione, modalità, velocità, loop/una volta, controlli inclinazione

Stima 5.3s
Normale
Molto lentaNormaleVeloceMolto veloce

I GIF vanno in loop di default; il video può ripetere N volte o puntare una durata.

Durata stimata: con contenuto, percorso e velocità attuali, ci vogliono circa 5.3s per uno scorrimento.

Perché `<marquee>` è stato deprecato?

`<marquee>` non rispetta le pratiche moderne su accessibilità e manutenzione. Con le animazioni CSS hai controllo completo e comportamento prevedibile.

Alternativa CSS moderna

L'approccio standard usa `@keyframes` + `animation` in un contenitore `overflow: hidden`. Puoi gestire tempi, direzione e preferenze reduced-motion in modo pulito.

Snippet HTML/CSS testo scorrevole

Copialo per sostituire rapidamente un vecchio 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>

Quando conviene usare il generatore

Quando servono anteprima precisa, export trasparente, crediti lunghi, prospettiva o codice embed riutilizzabile.

FAQ alternativa marquee

Risposte rapide su migrazione, accessibilità e scelta export.

`<marquee>` funziona ancora?

In parte sì, ma non è consigliato come base stabile nel lungo periodo.

Come metto in pausa al passaggio del mouse?

Imposta `animation-play-state: paused` nello stato hover.

Come supporto utenti con reduced-motion?

Usa `prefers-reduced-motion` per disattivare o rallentare l'animazione.

Quando scegliere export GIF/WebM?

Quando ti serve riproduzione uniforme in editing video, social o overlay live.

Vuoi sostituire il tuo vecchio marquee?

Apri il generatore e crea un risultato pronto per la produzione.