Il comune HTML ci permette di ottenere, grazie al tag marquee, un effetto testo scorrevole simile a quello realizzabile attraverso animazioni flash o effetti javascript! Possiamo decidere autonomamente la velocità e la direzione dello scroll in modo da poter creare sia testii scorrevoli in orizzontale che in verticale (un po’ come nei titoli di coda dei film).
Grazie al tag marquee possiamo realizzare scrolling di testo per valorizzare, ad esempio, le news del sito o un qualche slogan promozionale. Le finalità per le quali utilizzare questo effetto sono molteplici ma vi invito a valutarle con prudenza in quanto l’effetto finale non è sempre il massimo dal punto di vista dell’usabilità.
Vediamo di seguito un esempio di testo scorrevole in verticale realizzato in semplice HTML:
<marquee
loop="-1"
scrollamount="1"
scrolldelay="20"
direction="up"
height="150"
width="300"
align="right">
Inserire qui tutto il testo per lo scrolling<br>
Inserire qui tutto il testo per lo scrolling<br>
Inserire qui tutto il testo per lo scrolling<br>
Inserire qui tutto il testo per lo scrolling<br>
Inserire qui tutto il testo per lo scrolling<br>
Inserire qui tutto il testo per lo scrolling<br>
Inserire qui tutto il testo per lo scrolling<br>
Inserire qui tutto il testo per lo scrolling<br>
</marquee>Vediamo di seguito gli attributi del tag marquee per capire cosa abbiamo fatto nel nostro esempio e come è possibile personalizzarne l’effetto per raggiungere i nostri scopi:
- loop – indica il numero di iterazioni dello scorrimento; impostando come valore -1 lo scorrimento sarà continuo (cd. loop infinito);
- behavior – controlla il comportamento dello scorrimento; uò avere tre possibili valori:
- scroll – il testo scorre fino ad uscire dal box per poi riapparire dal lato opposto rispetto a quello da cui è uscito (valore di default);
- slide – è simile a scroll, ma quando il testo raggiunge la fine della casella scompare "di colpo" e ricomincia da capo;
- alternate – il testo "rimbalza" tra i margini del box di testo, senza uscirne fuori.
- scrollamount – imposta il numero di pixel di avanzamento del testo; maggiore è il numero e più veloce sarà lo spostamento del testo;
- scrolldelay – velocità dello scroller; indica il numero di millisecondi fra ciascuno dei successivi spostamenti del testo; impostate un valore arbitrario ma comunque non troppo alto;
- direction – direzione per lo scorrimento del testo; può essere scelta tra: up, down, left e right;
- height e width – rispettivamente altezza e larghezza dello scroller;
- align – allineamento dello scroller.
Aggiungendo un pizzico di Javascript al tag marquee, inoltre, possiamo creare un testo scorrevole che si ferma con il verificarsi dell’evento onmouseover (cioè quando il mouse dell’utente passa sul box di testo) e che riprende a scorrere con l’evento onmouseout (cioè quando il mouse "esce" dal box).
<marquee
onmouseover="this.stop()"
onmouseout="this.start()"
...