Moving Text the marquee tag
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
From right to left. This is the most simple animation given and we will not
need a label to achieve the movement.
need a label to achieve the movement.
<marquee>TEXT</marquee>
|
|---|
From left to right. We will add the attribute direction with the "right" as follows
<marquee direction="right">TEXT</marquee>
|
|---|
Alternatively. With attribute behavior.
<marquee behavior="alternate">TEXT</marquee>
|
|---|
The bottom up.
<marquee direction="up">TEXT</marquee>
|
|---|
From the top down.
<marquee direction="down">TEXT</marquee>
|
|---|
From the top down alternative.
<marquee direction="up" behavior="alternate">TEXT</marquee>
|
|---|
From the top down as well from left to right at the same time. See the example for a better understanding
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXT</marquee></marquee>
|
|---|
Same example but in a closed space
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</marquee></marquee>
|
|---|
On a background
<font color="WHITE"><marquee direction="left" style="background:RED">TEXT</marquee></font>
|
|---|
In a frame.
<marquee style="border:RED 3px SOLID">TEXT</marquee>
|
|---|
Picture. Using the above script, may be inserted photos with or without text. They will be introduced like in the following example:
<marquee>Some text here <img src="/img/header_zizix.jpg" width="88" height="31" alt="Zizix Tutorials " border="0"></marquee>
|
|---|
Animation placed in text.
Some text before <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Zizix tutorials " border="0"></marquee> Some text after.
|
|---|
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.
Movement interrupted with attribute scrollamount. A value of "10" for example, will advance the text movement with 10 pixels / 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.
Movement interrupted with attribute scrollamount. A value of "10" for example, will advance the text movement with 10 pixels / 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.
No comments:
Post a Comment