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()"
...