A tag marquee. Como a usamos

Te mostraremos nesse artigo algumas maneiras de animar o texto usando a tag marquee. A tag marquee é um elemento HTML que faz o texto se mover da esquerda pra direita, de cima para baixo.

Ilustraremos essas animações usando os exemplos abaixo.

Exemplo prático do uso da tag marquee

From right to left. (Da direita para a esquerda) Essa é a mais simples animação dada e não precisará de uma etiqueta para fazer o movimento.

html<marquee>TEXTO</marquee>

Demo

From left to right. (Da esquerda para a direita) Adicionaremos o atributo de direção "right" (direita), como no seguinte:

html<marquee direction="right">TEXTO</marquee>

Demo

Alternatively.  com o atributo  behavior. (comportamento)

html<marquee behavior="alternate">TEXTO</marquee>

Demo

The bottom up. (O botão UP)

html<marquee direction="up">TEXTO</marquee>

Demo

From the top down. (De cima para baixo)

html<marquee direction="down">TEXTO</marquee>

Demo

From the top down alternative. (De cima para baixo alternativo)

html<marquee direction="up" behavior="alternate" style="height:100px">TEXTO</marquee>

Demo

De cima para baixo, bem como da esqueda para a direita, ao mesmo tempo. Veja o exemplo para entender melhor:

html<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXTO</marquee></marquee>

Demo

Mesmo exemplo, mas em closed space (espaço fechado)

html<marquee behavior="alternate" direction="up" width="80%">
	<marquee direction="right" behavior="alternate">TEXTO</marquee>
</marquee>

Demo

On a background (Em um plano de fundo)

html<font color="WHITE"><marquee direction="left" style="background:RED">TEXTO</marquee></font>

Demo

In a frame.

html<marquee style="border:RED 3px SOLID">TEXTO</marquee>

Demo

Picture. (Imagem) Usando o script acima, podem ser inseridas fotos com ou sem texto. Elas serão introduzidas como no exemplo a seguir:

html<marquee>TEXTO <img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee>

Demo

TEXTO

Animação no Texto.

htmlAlgum texto antes <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee> Algum texto depois.

Demo

Algum texto antes Algum texto depois.

Mais alguma coisa para dizer: A velocidade do movimento pode ser modificada usando "scrolldelay" quando o valor de atributo é "1000", por exemplo, pode reduzir a velocidade para perto de 0, enquanto o valor "1" seria um valor de velocidade muito alta.

Movimento ininterrupto com o atributo scrollamount. O valor "10", por exemplo, avançará o movimento do texto com 10 pixels / frame.

Você também pode definir quantas vezes o texto passará da direita para a esquerda, por exemplo, usando o atributo loop. O valor "3" te deixará ver as palavras três vezes antes de desaparecer.