HTML <marquee> is used to slide or scroll contents in an HTML page. The contents can be texts or images or any HTML elements. They can be styled as well adding CSS to the marquee element itself or by adding some inline styles to the contents.
<marquee>This is an HTML marquee.</marquee>
Result
The default marquee content scrolls from the right end to the left end of the screen and then restarts from the right but we can add different attributes to change its speed, direction, behavior, etc.
The default marquee behavior is to scroll from right end to the left end of the screen and restart from the right. But, with behavior attribute, you can make it stop on the left end or move in reverse direction from the left to right end.
<marquee behavior="alternate"> This is an HTML marquee with behaviour set as alternate. </marquee>
Result
<marquee behavior="scroll"> This is an HTML marquee with behaviour set as scroll. </marquee>
Result
<marquee behavior="slide"> This is an HTML marquee with behaviour set as slide. </marquee>
Result
You can also set the width of an HTML marquee either in pixel value or in percentage value with relation to the width of the screen.
<marquee width="50%"> This is an HTML marquee with width defined. </marquee>
Result
You can also set the speed of the marquee scroll using scrollamount attribute. The default scrollamount is 6. Increase the number to make the marquee scroll faster or decrease it to make the marquee scroll slower.
<marquee scrollamount="10"> This is an HTML marquee with speed defined. </marquee>
Result
You can also set the direction where the marquee content be heading towards. The default value is left and other available options are right, up and down.
When you set the direction of an HTML marquee to move vertically instead of the default horizontal direction, you will need to define the height of the marquee as well to make it look good. Hence, the height attribute comes handy in such cases.
<marquee direction="up" height="100"> This is an HTML marquee with direction defined. </marquee>
Result
While the HTML marquee scrolls on its defined scrollamount, it might be painful to follow the contents within the marquee, especially, when there are some links added to some of the words. It is a good idea to make the marquee stop when a user drags his mouse over the marquee content so that he can easily click on the desired link. Stopping the marquee scroll will not be good enough though if he wants to skip the link and read more of the following content as it is paused. You will also need to make it scroll again when the user moves his mouse off the marquee. onmouseover and onmouseout javascript commands come handy in such cases as shown below.
<marquee onmouseover="stop()" onmouseout="start()"> This is an HTML marquee with action on mouse movement defined using <strong>onmouseover</strong> and <strong>onmouseout</strong>. </marquee>
Result
Leave a comment