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

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

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...

Differenza tra sito statico e sito dinamico, vantaggi e svantaggi

Un sito statico è una collezione di pagine web...
Pubblicità