L'effetto di scorrimento del testo, conosciuto anche come marquee, è stato uno dei primi elementi dinamici introdotti sul web grazie all'omonimo tag HTML degli anni '90. Sebbene quell'approccio sia oggi obsoleto e deprecato, l'esigenza di creare testi che scorrono in modo fluido e accattivante rimane ancora molto diffusa, soprattutto nei siti che puntano su motion design e micro-interazioni per migliorare l'esperienza dell'utente.
Oggi, grazie alle potenzialità del CSS, possiamo ricreare un effetto marquee elegante, performante e completamente personalizzabile senza ricorrere a tag non supportati o a soluzioni poco accessibili.
Come creare un effetto testo scorrevole con HTML e CSS
In questo tutorial vedremo passo dopo passo come realizzare un effetto di scorrimento del testo semplice, moderno e totalmente responsive utilizzando principalmente CSS (con un tocco di JavaScript solo se vogliamo aggiungere funzioni avanzate).
Analizzeremo la struttura del markup, le proprietà CSS fondamentali per gestire l'animazione e i possibili miglioramenti da apportare per ottenere un risultato professionale. Alla fine avrai un componente pronto da usare nei tuoi progetti, perfetto per mostrare annunci, ticker, slogan o qualsiasi contenuto in movimento che dia dinamismo al layout del tuo sito web.
Quali linguaggi useremo?
Per realizzare un effetto di scorrimento del testo moderno e performante, utilizzeremo principalmente HTML e CSS, sfruttando le proprietà di animazione introdotte negli standard più recenti. L'HTML ci servirà per definire la struttura del contenuto, mentre CSS gestirà l'intero movimento tramite keyframes e trasformazioni hardware-accelerate, garantendo fluidità e un impatto minimo sulle prestazioni del browser. L'uso di JavaScript sarà opzionale e verrà preso in considerazione solo per aggiungere funzioni extra, come l'avvio o la pausa dell'animazione al passaggio del mouse.
Prima di entrare nel dettaglio del codice è utile visualizzare un'anteprima del risultato che otterremo. L'effetto finale sarà un testo che si muove in modo continuo e fluido da destra verso sinistra, racchiuso all'interno di una sezione personalizzabile. Potrai modificare velocità, direzione, spaziatura, colori e persino aggiungere più righe di testo scorrevole, così da adattare il componente allo stile del tuo progetto. In pratica, il risultato finale apparirà simile a questo esempio:
"Benvenuto nella nostra guida! Scopri come creare un effetto marquee moderno, fluido e responsive con CSS."
Il testo scorrerà in loop infinito, senza interruzioni visive, con una transizione morbida pensata per mantenere pulita l'esperienza utente. Nelle prossime sezioni analizzeremo passo dopo passo tutti gli elementi necessari per costruire questo effetto da zero.
Per creare un effetto di scorrimento del testo con CSS, la struttura HTML può rimanere molto semplice. L'obiettivo è definire un contenitore che nasconda tutto ciò che esce dai suoi margini e un elemento interno che conterrà il testo da animare. Questa configurazione ci permetterà poi, tramite CSS, di far scorrere l'intero blocco di testo in modo continuo. Ecco il markup di base:
<body>
<div class="marquee">
<div class="marquee-content">
Benvenuto nella nostra guida! Scopri come creare un effetto marquee
moderno, fluido e responsive con CSS.
</div>
</div>
</body><div class="marquee">
Questo è il contenitore esterno. La sua funzione principale sarà quella di definire l'area visibile del testo, nascondendo ciò che scorre fuori dai bordi. Sarà a questo livello che useremo overflow: hidden nella parte CSS.
<div class="marquee-content">È l'elemento che contiene il testo da far scorrere. Questo blocco verrà animato tramite trasformazioni CSS, spostandosi da destra a sinistra tramite una keyframe animation.
Per dare vita all'effetto marquee utilizziamo alcune proprietà fondamentali del CSS, come overflow, white-space e soprattutto le animazioni definite tramite @keyframes. L'obiettivo è far scorrere l'intero blocco interno da destra verso sinistra con un movimento fluido e continuo, mantenendo il contenitore esterno fermo e ben delimitato. Qui sotto trovi il codice completo necessario per realizzare l'animazione:
.marquee {
width: 100%;
overflow: hidden;
background: #f7f7f7;
padding: 10px 0;
border-radius: 6px;
}
.marquee-content {
display: inline-block;
white-space: nowrap;
animation: scroll 12s linear infinite;
font-size: 1.2rem;
font-weight: 500;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}Nel CSS, il contenitore .marquee ha il compito di mostrare solo la parte visibile del testo, motivo per cui utilizziamo overflow: hidden. La larghezza al 100% permette all'elemento di adattarsi a qualsiasi layout, rendendo l'effetto completamente responsive. La spaziatura e il colore di sfondo sono personalizzabili, così come i bordi arrotondati, che rendono l'elemento più moderno e gradevole.
Il cuore dell'animazione risiede invece in .marquee-content Rendiamo il testo una riga continua grazie a white-space: nowrap; così da evitare interruzioni mentre scorre. L'animazione applicata tramite la proprietà animation permette al blocco di muoversi in modo costante e lineare per tutta la durata specificata, creando un loop infinito. Infine, l'animazione @keyframes scroll definisce il percorso: la trasformazione parte completamente fuori dallo schermo a destra e termina completamente oltre il margine sinistro, generando un movimento continuo dal principio alla fine.
Risultato e considerazioni
Una volta uniti HTML e CSS, il risultato finale è un effetto di scorrimento elegante, fluido e perfettamente compatibile con i browser moderni. Il testo appare ben leggibile e scorre in modo continuo da destra verso sinistra senza interruzioni visive, mantenendo una transizione uniforme grazie all'animazione lineare. Il contenitore rimane stabile, mentre l'elemento interno percorre l'intera larghezza disponibile, dando l'impressione di un nastro in movimento che ripete costantemente il suo messaggio.
L'effetto si presta particolarmente bene per comunicazioni rapide, annunci promozionali, avvisi in evidenza o per aggiungere un tocco dinamico a sezioni statiche di una pagina web. Il timer impostato nei keyframes stabilisce la velocità dello scorrimento, che può essere facilmente personalizzata intervenendo sulla durata dell'animazione; allo stesso modo, è possibile adattare dimensioni del testo, colori e spaziature per integrare l'effetto in qualsiasi stile grafico.
Dal punto di vista delle prestazioni, l'animazione è molto leggera poiché si basa su trasformazioni hardware-accelerate, il che garantisce fluidità anche su dispositivi mobili. Il tutto senza utilizzare tag obsoleti o funzioni deprecate: l'effetto è quindi moderno, accessibile e conforme agli standard attuali, con la possibilità di essere ampliato ulteriormente tramite JavaScript qualora si volessero aggiungere pause, controlli o interazioni. In questo stato, però, è già una soluzione completa, pulita e immediatamente utilizzabile in qualunque progetto web.
Realizzare un effetto di scorrimento del testo moderno non richiede più soluzioni obsolete o tag non supportati: grazie alle potenzialità del CSS, è possibile ottenere un risultato elegante, fluido e completamente personalizzabile con poche righe di codice. La struttura è semplice, l'animazione è leggera e il componente può essere adattato a qualsiasi stile grafico o necessità del progetto. Con questa guida è stato possibile creare un effetto marquee responsive e professionale, ampliabile in futuro con funzioni aggiuntive o varianti creative a seconda delle esigenze del tuo sito web.
