back to top

Testo scorrevole in HTML

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

Altri contenuti interessanti

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Video Background HTML e CSS: consigli, caratteristiche tecniche e best practices

Utilizzare un video come sfondo (noto anche come video background)...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltร  quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML lโ€™attributo rel puรฒ essere utilizzato esclusivamente in...

Humans.txt โ€“ cosโ€™รจ, a cosa serve e come funziona

Humans.txt รจ un formato standard concepito per corredare un...
Pubblicitร