Marquee HTML Code: A Comprehensive Guide to Animated Text and Images
In the world of front-end development, creating eye-catching and engaging content is crucial for capturing users’ attention. One popular technique for achieving this is through the use of animated text and images, which can be easily implemented using the Marquee HTML tag. In this article, we will delve into the various parameters and attributes of the Marquee tag, providing you with a complete understanding of how to create stunning animated effects.
Basic Marquee Tag
The most basic form of the Marquee tag is simply <Marquee> ... </Marquee>, where the content inside the tags will scroll horizontally by default. However, this can be customized using various attributes to create different effects.
Behavior Attributes
The behavior attribute determines how the content inside the Marquee tag will scroll. There are three possible values:
- slide:
<Marquee behavior="slide"> ... </Marquee>- This creates a sliding effect, where the content will move from one side to the other. - scroll:
<Marquee behavior="scroll"> ... </Marquee>- This creates a scrolling effect, where the content will move continuously. - alternate:
<Marquee behavior="alternate"> ... </Marquee>- This creates an alternating effect, where the content will scroll back and forth.
Direction Attributes
The direction attribute determines the direction in which the content will scroll. There are four possible values:
- down:
<Marquee direction="down"> ... </Marquee>- This creates a scrolling effect downwards. - up:
<Marquee direction="up"> ... </Marquee>- This creates a scrolling effect upwards. - right:
<Marquee direction="right"> ... </Marquee>- This creates a scrolling effect to the right. - left:
<Marquee direction="left"> ... </Marquee>- This creates a scrolling effect to the left.
Loop and Width Attributes
The loop attribute determines the number of times the content will scroll. There are two possible values:
- loop:
<Marquee loop=2> ... </Marquee>- This creates a scrolling effect that will repeat twice.
The width attribute determines the width of the Marquee tag. There are two possible values:
- width:
<Marquee width=180> ... </Marquee>- This sets the width of the Marquee tag to 180 pixels.
Height Attribute
The height attribute determines the height of the Marquee tag. There are two possible values:
- height:
<Marquee height=30> ... </Marquee>- This sets the height of the Marquee tag to 30 pixels.
Background Color Attribute
The bgcolor attribute determines the background color of the Marquee tag. There are two possible values:
- bgcolor:
<Marquee bgcolor=FF0000> ... </Marquee>- This sets the background color of the Marquee tag to red.
Scrolling Speed and Delay Attributes
The scrollamount attribute determines the scrolling speed of the Marquee tag. There are two possible values:
- scrollamount:
<Marquee scrollamount=30> ... </Marquee>- This sets the scrolling speed of the Marquee tag to 30 pixels.
The scrolldelay attribute determines the scrolling delay of the Marquee tag. There are two possible values:
- scrolldelay:
<Marquee scrolldelay=300> ... </Marquee>- This sets the scrolling delay of the Marquee tag to 300 milliseconds.
Mouse Over and Out Attributes
The onmouseover attribute determines the action that will be taken when the mouse is moved over the Marquee tag. There are two possible values:
- onmouseover:
<Marquee onmouseover="this.stop()"> ... </Marquee>- This stops the scrolling effect when the mouse is moved over the Marquee tag. - onmouseout:
<Marquee onmouseout="this.start()"> ... </Marquee>- This starts the scrolling effect when the mouse is moved away from the Marquee tag.
Example Code
Here is an example of a Marquee tag with multiple attributes:
<Marquee direction="left" loop=2 width=960 height=30 scrollamount=30 scrolldelay=300 onmouseover="this.stop()" onmouseout="this.start()">
<p>This is a sample text that will scroll to the left and repeat twice.</p>
</Marquee>
By combining these attributes, you can create a wide range of animated effects that will engage and captivate your users.