Come replicare il comportamento del tag HTML ‘marquee’ con HTML, CSS e Vanilla JavaScript

26 Gennaio 2025 15:39

SCRIPTS

Tag HTML <marquee> ormai deprecato, che azionava un effetto scorrimento

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>.

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:

  1. Compatibilità moderna: il codice è conforme agli standard attuali e funziona su tutti i browser principali.
  2. Accessibilità migliorata: il comportamento può essere adattato per garantire una migliore esperienza utente, ad esempio permettendo agli utenti di mettere in pausa l’animazione.
  3. Flessibilità: è possibile personalizzare la velocità, la direzione, il ciclo e gli stili.
  4. 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!

Pubblicato Da

Stefano

Classe '89, Perito Informatico, da sempre appassionato di tecnologia, informatica e fotografia. Da oltre 10 anni aiuto privati e piccole / medie imprese ad avere una presenza online con il proprio sito web ed espandere la loro visibilità.

Visualizza tutti gli articoli

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

2 Commenti
    andrea 27 Gennaio 2025 - 11:07

    Fantastico, funziona perfettamente!! grazie!!

      Stefano Administrator Autore 7 Febbraio 2025 - 21:54

      Di niente! Per qualsiasi cosa scrivete pure qui nei commenti! 🙂