HTML Marquee

Marquee Tag

HTML Marquee Tag is a non standard element used to scroll text, image or any content from left to right, right to left, bottom to top and top to bottom directions. We can also control marquee speed, direction , scrolldelay and Stop or start marquee on mouseover and mouseout using marquee attributes.

To use marquee in Html5, use CSS3 Animations

Marquee Tag Example

<marquee> This is a marquee </marquee>
		

Marquee Attributes

1. Direction
2. Behavior
3. Scrollamount
4. Scrolldelay

Marquee Javascript events

1. Stop Marquee on mouseover
2. Start Marquee on mouseout

How to Change Marquee Direction

Direction attribute can change direction of marquee. We can change direction of marquee from left to right, right to left, top to bottom or bottom to top. Default direction of marquee is left.

How to Change Marquee direction?

Direction attribute in marquee can have four different values. Default value is left. Other values are right, top and bottom. See example

Marquee Direction Left

<marquee direction="left">marquee with direction left </marquee>

Marquee Direction Right

<marquee direction="right"> This marquee will scroll right </marquee>
		

Marquee Direction Up

<marquee direction="up" height="200"> This marquee will scroll upwards </marquee>
		

Marquee Direction Bottom

<marquee direction="down" height="200"> This marquee will scroll downwards </marquee>
		

How to Change Marquee Behavior

Marquee's behavior can be changed using behavior attribute. The default behaviour of marquee is scroll. Three possible values for marquee behavior are:

1. Scroll
2. Slide
3. Alternate

Marquee Scroll behavior

Scroll is the default behavior of HTML Marquee.

<marquee> This is scroll behavior of a marquee </marquee>

		

Marquee Slide behavior

Marquee Slide behavior slide marquee but only once.

<marquee behavior="slide"> This is slide behavior of a marquee </marquee>

		

Marquee Alternate behavior

Marquee Alternate behavior move marquee from left ro right and then back from right to left. This happens infinitely.

<marquee behavior="alternate">This is alternate behavior of a marquee </marquee>

		

How to Change Marquee speed using Scrollamount

Scrollamount attribute is used to change speed of a marquee. Default Marquee speed is 6px per second. To increase or decrease speed of marquee, change value of scrollamount. Scrollamount value is a number.See example

Scrollamount attribute

<marquee scrollamount="10"> This is a marquee with scrollamount 10 </marquee>
<marquee scrollamount="25"> This is a marquee with scrollamount 25 </marquee>
<marquee scrollamount="50"> This is a marquee with scrollamount 50 </marquee>
<marquee scrollamount="100"> This is a marquee with scrollamount 100 </marquee>
		

How to delay Marquee using Scrolldelay

Marquee scrolldelay is delay interval between two frames. Scrolldelay works on Firefox, Internet Explorer, Edge, Safari. But on Chrome, scrolldelay is same like scrollamount.

Scrolldelay in marquee

<marquee scrolldelay="10">This is a marquee with scrolldelay 10</marquee>
<marquee scrolldelay="25">This is a marquee with scrolldelay  25</marquee>
<marquee scrolldelay="50">This is a marquee with scrolldelay  50</marquee>
<marquee scrolldelay="100">This is a marquee with scrolldelay  100</marquee>
<marquee scrolldelay="200">This is a marquee with scrolldelay  200</marquee>
<marquee scrolldelay="300">This is a marquee with scrolldelay  300</marquee>
<marquee scrolldelay="500">This is a marquee with scrolldelay  500</marquee>
<marquee scrolldelay="1000">This is a marquee with scrolldelay  1000</marquee>
		

Marquee Events in javascript

Marquee Elements supports javascript mouseover and mouseout events to stop and start. These events are using JavaScript Inline events attribute onmouseover and onmouseout. See examples.

<marquee onmouseover="stop()">This marquee will stop on mouseover.</marquee>
		

<marquee onmouseover="stop()" onmouseout="start()">This marquee will stop on mouseover and restart on mouseout.</marquee>