
Il tag HTML ‘marquee’, <marquee>
è stato a lungo utilizzato per creare un effetto di testo o contenuto scorrevole sul web. Tuttavia, questo tag è stato deprecato e non è più supportato dagli standard moderni del W3C. La sua rimozione è stata motivata dalla mancanza di flessibilità e dall’impossibilità di personalizzare adeguatamente l’effetto.
Se stai cercando di replicare questo comportamento, è possibile farlo utilizzando un mix di HTML, CSS e JavaScript. In questo articolo ti guideremo nella creazione di uno script personalizzato, passo dopo passo, spiegandoti le logiche che ci sono dietro. Alla fine, potrai integrare un pezzo di codice completo che sostituisce efficacemente <marquee>
.
Indice
Perché evitare <marquee>
Prima di entrare nel dettaglio della soluzione, è importante sottolineare alcune delle problematiche legate all’uso di <marquee>
:
- Deprecazione: non è più supportato nei browser moderni.
- Accessibilità: crea problemi per gli screen reader e per gli utenti con disabilità visive.
- Limitata personalizzazione: offre poche opzioni per configurare l’aspetto e il comportamento del contenuto scorrevole.
Con queste premesse, è chiaro che creare un’alternativa moderna e compatibile è essenziale per garantire un’esperienza utente ottimale.
Struttura HTML
Iniziamo definendo la struttura HTML che ospiterà il nostro contenuto scorrevole. Creeremo un contenitore principale e un contenitore interno che conterrà il testo o gli elementi grafici da far scorrere. Ad esempio:
<div class="marquee">
<span>
<!-- Qui inseriamo il testo o gli elementi che vogliamo fare scorrere -->
Ciao! Questo è un esempio di tag marquee che scorre, creato con Vanilla JS.
</span>
</div>
Questa struttura fornisce una base su cui lavorare. Il contenitore principale fungerà da finestra, mentre il contenuto interno verrà animato.
Stili CSS
Il passo successivo è definire gli stili CSS per il nostro elemento scorrevole. Utilizzeremo alcune proprietà CSS chiave, come overflow
, per creare un contenitore visibile e nascondere il contenuto in eccesso:
*{
box-sizing: border-box;
}
:root{
--marquee-bg-color: #f1f1f1;
--marquee-bg-color-rgba: 241, 241, 241;
}
.marquee {
position: relative;
width: 100%;
overflow: hidden;
white-space: nowrap;
border: 1px solid #000;
background-color: var(--marquee-bg-color);
padding:30px;
}
.marquee span {
display: inline-block;
white-space: nowrap;
font-size: 38px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color: #000;
font-family: Arial, sans-serif;
will-change: transform;
align-self: center;
}
In questo esempio:
.marquee
definisce un contenitore con larghezza variabile e overflow nascosto..marquee
span applica gli stili al testo che avrà lo scorrimento del tag <marquee>- L’animazione verrà gestita interamente dallo script JS.
Script JavaScript
Per ottenere un controllo ed una flessibilità maggiore, ho deciso di gestire tutta la parte dell’animazione interamente con Javascript, in particolare utilizzando la Web API nativa di animazione attivabile col metodo animate()
document.addEventListener('DOMContentLoaded', function () {
const duration = 10000; // durata dell'anamazione in ms
const directionAnimation = 'left'; //direzione dello scorrimento: left or right
const marquee = document.querySelector('.marquee');
const span = marquee.querySelector('span');
const marqueeWidth = marquee.offsetWidth;
const spanWidth = span.offsetWidth;
let keyframes = [];
if('left' == directionAnimation){
keyframes = [
{ transform: `translateX(${marqueeWidth}px)` },
{ transform: `translateX(${-spanWidth}px)` }
];
}
else if('right' == directionAnimation){
keyframes = [
{ transform: `translateX(${-spanWidth}px)`},
{ transform: `translateX(${marqueeWidth}px)` }
];
}
let options = {
duration: duration,
iterations: Infinity, //animazione infinita
easing: "linear" //tipologia di easing dell'animazione
};
// qui iniziamo l'animazione
const marqueeAnimation = span.animate(keyframes, options);
// Quando il cursore del mouse passa sopra al testo scorrevole mettiamo in pausa l'animazione
marquee.addEventListener('mouseenter', () => {
marqueeAnimation.pause();
});
// Quando il cursore lascia il testo scorrevole possiamo far ripartire l'animazione
marquee.addEventListener('mouseleave', () => {
marqueeAnimation.play();
});
});
Con questo script:
- Calcoliamo dinamicamente la larghezza del contenitore interno e del testo scorrevole
- Personalizziamo la durata dell’animazione e la direzione dello scorrimento
- Impostiamo le regole CSS, chiamate Keyframes, che successivamente passeremo come parametri alla funzione animate()
- Infine creiamo due listener, ‘mouseenter’ e ‘mouseleave’ per mettere in pausa e far ripartire l’animazione.
Vantaggi dell’approccio personalizzato
Optare per una soluzione basata su HTML, CSS e JavaScript offre numerosi vantaggi rispetto al vecchio tag <marquee>
e rispetto al solo utilizzo di CSS:
- Compatibilità moderna: il codice è conforme agli standard attuali e funziona su tutti i browser principali.
- Accessibilità migliorata: il comportamento può essere adattato per garantire una migliore esperienza utente, ad esempio permettendo agli utenti di mettere in pausa l’animazione.
- Flessibilità: è possibile personalizzare la velocità, la direzione, il ciclo e gli stili.
- Manutenzione: è più facile mantenere il codice, grazie all’uso di tecniche standard e native per i browser.
Codice completo
Ora che abbiamo analizzato tutti i pezzi del puzzle, possiamo combinare HTML, CSS e JavaScript in uno script completo e funzionante.
Ecco qui il codice completo funzionante che abbiamo appena visto:
HTML
<div class="marquee">
<span>
<!-- Qui inseriamo il testo o gli elementi che vogliamo fare scorrere -->
Ciao! Questo è un esempio di tag marquee che scorre, creato con Vanilla JS.
</span>
</div>
CSS
*{
box-sizing: border-box;
}
:root{
--marquee-bg-color: #f1f1f1;
--marquee-bg-color-rgba: 241, 241, 241;
}
.marquee {
position: relative;
width: 100%;
overflow: hidden;
white-space: nowrap;
border: 1px solid #000;
background-color: var(--marquee-bg-color);
padding:30px;
}
.marquee span {
display: inline-block;
white-space: nowrap;
font-size: 38px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color: #000;
font-family: Arial, sans-serif;
will-change: transform;
align-self: center;
}
.marquee::before, .marquee::after{
content: "";
position: absolute;
top:0;
bottom:0;
width:30px;
z-index:2;
}
.marquee::before{
left:0;
background: linear-gradient(to right, rgba(var(--marquee-bg-color-rgba), 1), rgba(var(--marquee-bg-color-rgba), 0));
}
.marquee::after{
right:0;
background: linear-gradient(to left, rgba(var(--marquee-bg-color-rgba), 1), rgba(var(--marquee-bg-color-rgba), 0));
}
Rispetto al codice CSS visto in precedenza ho aggiunto alcuni stili per migliorare la visibilità del testo scorrevole sfuocando con un gradiente i margini destro e sinistro.
JAVASCRIPT
document.addEventListener('DOMContentLoaded', function () {
const duration = 10000; //ms
const directionAnimation = 'left'; //left or right
const marquee = document.querySelector('.marquee');
const span = marquee.querySelector('span');
const marqueeWidth = marquee.offsetWidth;
const spanWidth = span.offsetWidth;
let keyframes = [];
if('left' == directionAnimation){
keyframes = [
{ transform: `translateX(${marqueeWidth}px)` },
{ transform: `translateX(${-spanWidth}px)` }
];
}
else if('right' == directionAnimation){
keyframes = [
{ transform: `translateX(${-spanWidth}px)`},
{ transform: `translateX(${marqueeWidth}px)` }
];
}
let options = {
duration: duration, // Durata dell'animazione in millisecondi
iterations: Infinity,
easing: "linear"
};
const marqueeAnimation = span.animate(keyframes, options);
marquee.addEventListener('mouseenter', () => {
marqueeAnimation.pause();
});
marquee.addEventListener('mouseleave', () => {
marqueeAnimation.play();
});
});
See the Pen Marquee with JS by Stefano Fattori (@Stefano-Fattori) on CodePen.
Ecco l’esempio completo anche su CodePen
Conclusione
Replicare il comportamento del tag <marquee>
utilizzando HTML, CSS e JavaScript è un modo efficace per mantenere il tuo sito web moderno e conforme agli standard. Questo approccio garantisce una maggiore flessibilità e offre un’esperienza utente migliore.
Se hai trovato utile questo articolo, condividilo e facci sapere nei commenti come hai implementato questa soluzione nel tuo progetto! Buon lavoro!
Fantastico, funziona perfettamente!! grazie!!
Di niente! Per qualsiasi cosa scrivete pure qui nei commenti! 🙂