Marquee
In this article we are going to learn about marquee, marquee left, right, up and down in html, how to animate text to move to a required direction.
We learnt about html in general, learning the structure of hypertext markup language, text in html, lists in html, links in html, inputs in html, buttons in html, forms in html, html elements and tables in html so, now we are going to learn about marquee in html.
Marquee
Marquee (<marquee></marquee>) is used to move text or image to a specified direction of the web page horizontally or vertically by using marquee left, marquee right, marquee up and marquee down.
Marquee left
Marquee left is a default marquee direction, any marquee text with unspecified direction will move horizontally from right to left.
Let us create a simple marquee left, copy and paste below code.
<marquee style="background: orange;">
<p>This is default marquee text or left marquee.</p>
</marquee>
So, we should have the following results and the text moves from right to left of the web page.
Marquee right
Marquee right is a marquee setting that moves text horizontally from left to right of the web page.
Let us create a simple marquee right, copy and paste below code.
<marquee direction="right" style="background: orange;">
<p>This is a text with marquee right applied..</p>
</marquee>
So, we should have the following results and the text moves from left to right of the web page.
Marquee up
Marquee up is a marquee setting that moves text vertically from bottom to top of the web page.
Let us create a simple marquee up, copy and paste below code.
<marquee direction="up" style="background: orange;">
<p>This is a text with marquee up applied.</p>
</marquee>
So, we should have the following results and the text moves from bottom to top of the web page.
Marquee down
Marquee down is a marquee setting that moves text vertically from top to bottom of the web page.
Let us create a simple marquee up, copy and paste below code.
<marquee direction="down" style="background: orange;">
<p>This is a text with marquee down applied.</p>
</marquee>
So, we should have the following results and the text moves from top to bottom of the web page.