Others


HTML Marquee Tag


The HTML <marquee> tag is used for creating a scrolling text or image in the web page moves across the page in a horizontal or vertical direction.

Attribute Description
width provides the width of a marquee
height provides the height of a marquee
direction provides the direction in which your marquee will allow you to scroll. Value : left, right, up or down
behavior provides the scrolling type in a marquee. That scrolling can be like slide, scroll or alternate. Default value is scroll.
scrolldelay scrolldelay set the interval between each scroll movement in milliseconds.
scrollamount scrollamount sets the size in pixels of each jump
loop provides how many times the marquee will loop
Example 
<html>
  <head>
    <title>HTML Marquee Tag</title>
  </head>
  <body>
   <marquee width="50%" height="100px">
        Sample scrolling text.
    </marquee>
  </body>
</html>
Try it Yourself

Output:

Sample scrolling text.

Marquee direction - Scroll Up

Example 
<marquee width="50%" height="100px" direction="up">
   Sample scrolling text moves towards upward direction.
</marquee>
Try it Yourself

Output:

Sample scrolling text moves towards upward direction.

Marquee direction - Scroll Down

Example 
<marquee width="50%" height="100px" direction="down">
   Sample scrolling text moves towards downward direction.
</marquee>
Try it Yourself

Output:

Sample scrolling text moves towards downward direction.

Marquee direction - Scroll Left to Right

Example 
<marquee width="50%" height="100px" direction="right">
   Sample scrolling text moves towards left to right.
</marquee>
Try it Yourself

Output:

Sample scrolling text moves towards left to right

Marquee direction - Scroll Right to Left

Example 
<marquee width="50%" height="100px" direction="left">
   Sample scrolling text moves towards right to left.
</marquee>
Try it Yourself

Output:

Sample scrolling text moves towards right to left

Marquee behavior - Scroll

Example 
<marquee width="50%" height="100px" direction="right" behavior="scroll">
    Sample scrolling text using scroll behavior
</marquee>
Try it Yourself

Output:

Sample scrolling text using scroll behavior

Marquee behavior - Alternate

Example 
<marquee width="50%" height="100px" direction="right" behavior="alternate">
    Sample scrolling text using alternate behavior
</marquee>
Try it Yourself

Output:

Sample scrolling text using alternate behavior

Marquee behavior - Slide

Example 
<marquee width="50%" height="100px" direction="right" behavior="slide">
    Sample scrolling text using slide behavior
</marquee>
Try it Yourself

Output:

Sample scrolling text using slide behavior(slide behavior moves only once)

Marquee loop attribute

The Marquee loop attribute in HTML is used to define the number of time marquee should loop. The default value of loop is infinite.

Example 
<marquee width="50%" height="100px" direction="right" behavior="slide" loop="5">
    Sample scrolling text using slide behavior with loop attribute
</marquee>
Try it Yourself

Output:

Sample scrolling text using slide behavior with loop attribute

Marquee scrollamount attribute

The Marquee scrollamount attribute is used to set the amount of scrolling at each interval. The default speed of the scrollamount value is 6.

Example 
<marquee width="100%" height="75px" direction="right" scrollamount="50">
    Sample scrolling text using fast scrollamount
</marquee> 
<marquee width="100%" height="75px" direction="left" scrollamount="8">
    Sample scrolling text using slow scrollamount
</marquee>
Try it Yourself

Output:

Sample scrolling text using fast scrollamount Sample scrolling text using slow scrollamount

Marquee scrolldelay attribute

The Marquee scrolldelay attribute is used to set the interval between each scroll movement in milliseconds. The default value of Scrolldelay is 85.

Example 
<marquee width="100%" height="75px" direction="right" scrolldelay ="100">
    Sample scrolling text using scrolldelay 
</marquee> 
<marquee width="100%" height="75px" direction="left" scrolldelay ="400">
    Sample scrolling text using scrolldelay 
</marquee>
Try it Yourself

Output:

Sample scrolling text using fast scrolldelay Sample scrolling text using slow scrolldelay