Marquee blink - guida al linguaggio HTML - di Eliana Argenti e Tommaso Bientinesi

TESTO LAMPEGGIANTE E SCORREVOLE

Abbiamo già parlato del testo lampeggiante e del testo scorrevole.

Si possono mettere insieme le due cose sfuttando la proprietà del marquee scrollamount, che indica la quantità di pixel di cui si sposta ogni volta la scritta.
La velocità del blink sarà invece data dall'attributo scrolldelay, che è l'intervallo in millisecondi fra due spostamenti. Noi qui useremo un intervallo di 1 secondo, per permettere una migliore visualizzazione.

Calcolaliamo innanzitutto quanti pixel corrispondano ad un carattere. Per avere dei calcoli precisi ci conviene usare un tipo di carattere a larghezza fissa, come il Courier.

Prepariamo una tabella che contenga le lettere dell'alfabeto italiano, ripetute due volte, come la seguente:

abcdefghilmnopqrstuvzabcdefghilmnopqrstuvz

La larghezza della stringa è di 420 pixel, ed essa contiene 42 caratteri di 12 pt, dunque possiamo concludere che ogni carattere del tipo che abbiamo usato occupa 10 pixel in base alla seguente proporzione: 420 : 42 = x : 1. Codice:

<table> <tr><td bgcolor=navy width=420><p style="font-family:courier; font-size: 12pt; color:white; font-weight:bold">abcdefghilmnopqrstuvzabcdefghilmnopqrstuvz</table>

Possiamo in questo modo facilmente verificare che la prima volta che il testo compare nel marquee, viene lasciato uno spazio pari al numero di pixel di scrollamount, mentre il testo viene compreso all'interno dello spazio, e così via.

VERIFICA

abcdefghilmnopqrstuvzabcdefghilmnopqrstuvz
Ciao

La scritta ciao occupa 4×10 = 40 pixel. Nell'esempio abbiamo inserito uno scrollamount = 100 ed abbiamo 40 pixel scritti e 60 pixel di intervallo, a partire dal margine destro.
Codice:

<p align="center" style="font-size: 12pt; color:white; font-weight:bold; font-family:courier"> <marquee behavior="scroll" width= 420 direction="left" scrollamount="100" scrolldelay="1000">Ciao</marquee>

CENTRARE LA SCRITTA E FARE IN MODO CHE ESSA APPAIA E SCOMPAIA A TEMPO, COME IN UN BLINK

Dobbiamo porre lo scrollamount con il seguente calcolo:
metà larghezza del marquee + metà scritta, in pixel; nel nostro caso: 210 + 20 = 230

abcdefghilmnopqrstuvzabcdefghilmnopqrstuvz
Ciao

Codice:

FAR COMPARIRE LA SCRITTA TRE VOLTE

La scritta dovrebbe essere centrata, e quindi dovremmo ottenere un effetto simile a quello che si vede nella tabella in basso.
Dobbiamo quindi fare il seguente calcolo:

`spazi liberi`	`=`	`larghezza del marquee - larghezza totale scritta`	`nel nostro caso`	`420 - 3 × 40 = 420 - 120 = 300`
`intervallo`	`=`	`spazi liberi : numero intervalli`	`nel nostro caso`	`300 : 4 = 75`
`scrollamount`	`=`	`intervallo + larghezza di una scritta`	`nel nostro caso`	`75 + 40 = 115`

75 px 40 px 75 px 40 px 75 px 40 px 75 px

Ciao

Codice: