Softonic

Generatore di Testo Scorrevole

Passaggio 1 / 2
Avanti

I titoli scorrevoli sono un modo per le barre di annuncio, i ticker azionari e i banner di eventi di trasmettere molte informazioni su una striscia stretta dello schermo. Questo generatore ricrea il classico effetto HTML <marquee> con un’animazione CSS @keyframes e transform: translateX() pure, così la tecnica continua a funzionare in tutti i browser moderni senza il tag obsoleto. Scegli un messaggio, regola la velocità in secondi per ciclo, imposta colori e dimensione del font, e visualizza il ticker in anteprima dal vivo prima di ricostruirlo con il CSS mostrato di seguito.

Come costruire un banner scorrevole

  1. 1

    Digita il messaggio

    Inserisci il titolo. Frasi brevi (4-10 parole) si leggono meglio su una striscia in movimento.

  2. 2

    Scegli la velocità

    Secondi più bassi = scorrimento più veloce. 30-60 s per un ciclo completo funziona per ticker in stile notizie.

  3. 3

    Imposta colori e dimensione

    Scegli un colore per il testo, uno sfondo per la striscia e una dimensione del font che corrisponda all'altezza del tuo header.

  4. 4

    Anteprima dal vivo

    La demo si anima in tempo reale così puoi valutare la leggibilità prima di pubblicare.

  5. 5

    Ricostruiscilo in CSS

    Copia il pattern `@keyframes` e `transform: translateX()` mostrato sotto nel tuo foglio di stile per riprodurre il ticker sul tuo sito.

Perché l’animazione CSS invece di <marquee>

Il tag <marquee> è stato deprecato in HTML5 ed è segnalato da WHATWG come obsoleto. I browser lo rendono ancora per ora, ma gli strumenti di accessibilità e i validatori si lamentano, e perdi il controllo fine su easing e looping. Un’animazione transform: translateX() all’interno di overflow: hidden offre un comportamento visivo identico con strumenti moderni.

Regolazione della velocità

Il tempo di attraversamento dipende sia dalla durata che dalla larghezza totale. Una regola generale per un viewport di 1200 px:

Durata Sensazione Uso tipico
10-20 s Veloce, attira attenzione Vendite lampo, avvisi urgenti
30-45 s Ticker di notizie Risultati dal vivo, barre di titoli
60-90 s Ambientale Segnaletica di eventi, sale conferenze
120 s + Quasi fermo Decorativo, banner di marchi di lusso

Lista di controllo per l’accessibilità

  • Avvolgi la striscia in role="marquee" o aria-live="off" affinché i lettori di schermo non riannuncino il messaggio ad ogni ciclo.
  • Rispetta il movimento ridotto con @media (prefers-reduced-motion: reduce) { animation: none; } e mostra il testo staticamente.
  • Mantieni il rapporto di contrasto almeno 4.5:1 tra testo e sfondo; il testo in movimento è più difficile da leggere rispetto a quello statico.
  • Non mettere mai informazioni critiche (avvisi legali, prezzi, messaggi di errore) solo all’interno di una striscia scorrevole.

Domande frequenti

No. L’anteprima è un <div> con overflow: hidden e un’animazione CSS @keyframes che muove lo span interno con translateX. Si convalida come HTML5 moderno.

Aggiungi animation-play-state: paused sul selettore hover del contenitore. Alcuni utenti trovano questo più amichevole rispetto a un ciclo costante.

Sì. Cambia il valore finale di @keyframes da translateX(-100%) a translateX(100%) e inizia da -100% per invertire la direzione. Utile per le lingue RTL.

No. Le trasformazioni CSS vengono eseguite sulla GPU e il testo è HTML semplice all’interno del DOM, quindi i crawler lo leggono normalmente e l’animazione non blocca il thread principale.

Tutto rimane nel tuo browser mentre visualizzi in anteprima. Niente viene caricato o registrato.

Strumenti correlati

Simbolo Minore o Uguale

Copia il simbolo ≤ e i simboli di confronto matematico correlati. Include Unicode, entità HTML e markup LaTeX per fogli di calcolo, articoli e pagine web.

Generatore di testo per meme

Aggiungi didascalie da meme a un modello o a una tua immagine. Imposta testo sopra e sotto, regola font, colore e contorno, poi scarica o copia un PNG.

Simboli freccia da copiare

Copia frecce Unicode comuni in un clic: dritte, doppie, diagonali, uncinate, circolari e triangolari per documenti, chat e design.

Traduttore di emoji

Scrivi un testo in inglese e ogni parola dell'elenco integrato riceve un'emoji. Copia il risultato come testo con emoji incorporate.

Convertitore di testo amico della dislessia

Riformatta il testo incollato in paragrafi brevi e righe di circa 72 caratteri per facilitare la lettura. Copia il risultato in qualsiasi documento, e-mail o editor.

Generatore di Font per Instagram

Genera "font" Unicode (grassetto, corsivo, script, monospace, fraktur) da incollare direttamente nella tua bio, nel nome, nelle didascalie e nei commenti su Instagram.

Strumento disponibile in altre lingue