The marquee tag, how do we use it.

I will show you in this article some ways you can animate text with the marquee tag. The marquee tag is an HTML element that makes text move from left to right and top to down.

I will illustrate these animations using the examples shown below.

Practical examples using marquee tag

From right to left. This is the most simple animation given and we will not  need a label to achieve the movement.

html<marquee>TEXT</marquee>

Demo

From left to right.We will add the attribute direction with the "right" as follows

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

Demo

Alternatively. With attribute behavior.

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

Demo

The bottom up.

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

Demo

From the top down.

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

Demo

From the top down alternative.

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

Demo

From the top-down as well from left to right at the same time. See the example for a better understanding

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

Demo

Same example but in a closed space

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

Demo

On a background

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

Demo

In a frame.

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

Demo

Picture. Using the above script, may be inserted photos with or without text. They will be introduced like in the following example:

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

Demo

Some text here

Animation placed in text.

htmlSome text before <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee> Some text after.

Demo

Some text before Some text after.

It would be something more to say: that the speed of the movement can be changed using "scrolldelay" where an attribute value of "1000" for example, would reduce speed close to 0, while a value of "1" would be a very high speed.

Interrupted movement with attribute scrollamount. A value of "10" for example, will advance the text movement with 10 pixels / frame.

You can also set the number of times the text will pass from right to left for example, using an attribute loop. A value of "3" will let you see the words three times after that will disappear.