Lez.11 - Corso Intermedio Css

MARQUEE
Animazione del Testo: la proprietà marquee in un foglio di stile Css

La proprietà marquee

In questa lezione vedremo come si riesca a far scorrere del testo sullo schermo dando una certa animazione.

Questo riusciamo a farlo con la proprietà marquee di cui ne vediamo subito dei valori:

<marquee> testo....... </marquee> con il tag marquee semplicemente aperto e chiuso il testo entra da destra nello schermo e scorre verso sinistra fino a scomparire. Poi ricompare da destra e ricomincia il giro.

<marquee behavior="alternate"> testo...... </marquee> in questo caso il testo arriva sul bordo dello schermo e rimbalza tornando indietro senza mai uscire dallo schermo.

<marquee behavior="slide"> testo...... </marquee> il testo entra nello schermo partendo da destra, sbatte sul bordo sinistro e si ferma.

<marquee scrolldelay="10"> testo...... </marquee> il testo entra nello schermo scorrendo da destra scompare a sinistra e poi ricompare facendo sempre lo stesso ciclo solo scorre più velocemente.

<marquee bgcolor="yellow"> testo...... </marquee> la riga nella quale scorre il testo è colorata di giallo.

<marquee width="50%"> testo...... </marquee> il testo entra nello schermo partendo dal centro, scompare sul bordo sinistro e ricompare dal centro.

Ma vediamolo nel codice che è più facile a farsi che a dirsi:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Animazione Testo</title>
  <meta charset="utf-8">
 </head>
 <body>			    
	<h1>Animazione testo</h1>
	<marquee>
		Questo è il testo che scorre sullo schermo semplicemente con marquee.
	</marquee>
		
	<marquee behavior="alternate">
		Questo è il secondo testo che scorre con behavior="alternate"
	</marquee>
		<marquee behavior="slide">
		Questo è il secondo testo che scorre con behavior="slide"
	</marquee>
	<marquee scrolldelay="10">
		Questo è il terzo testo che scorre sullo schermo con scrolldelay="10".
	</marquee>
	<marquee bgcolor="yellow">
		Questo è il quarto testo che scorre sullo schermo con bgcolor="yellow".
	</marquee>
		<marquee width="50%">
		Questo è il quarto testo che scorre sullo schermo con width="50%".
	</marquee>
 </body>               
</html>