The marquee tag, how do we use it.

  »   Miscellaneous  »   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 to move from left to right and top to down.

I will illustrate these animations using the examples shown below.

Practical examples using marquee tag

The marquee tag defines how the element will move inside it. The avelable values are: scroll, slide, and alternate, with scroll being the default one.

From right to left marquee animation

Right to left is the most simple animation and we will not need any label to achieve the animation. The default value scroll is assumed here.

html<marquee>TEXT</marquee>

Demo

TEXT

From left to right marquee animation

We will add the attribute direction with the right value as follows

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

Demo

TEXT

Alternating direction

With attribute behavior and using alternate as a value.

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

Demo

TEXT

Bottom up animation

The bottom up animation si simple. You will only need to set the direction with the value up.

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

Demo

TEXT

Top down animation

The top to bottom animation si simple. You need to set the down value for the attribute direction.

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

Demo

TEXT

Mix more then one animation with marquee tag

Let's try from the top down alternative animation using marquee tag. Here is how we can add more than one attribute.

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

Demo

TEXT

Marqueee playground

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

TEXT

Same example but in a closed space

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

Demo

TEXT

Let's do it on a background

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

Demo

TEXT

In a frame.

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

Demo

TEXT

Insert image in marquee tag

Using the above script, you can insert an image 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 Tutorials

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 Tutorials 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 per frame.

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