HTML Marquee Tag

Definition

  • HTML <marquee> tag use to create a scrolling text or scrolling image from left to right, right to left, top to bottom, bottom to top. There is no limit. It's user define choice.

  • <marquee> tag is a container tag to create scrolling text.

  • <marquee> tag support following some attributes. This attributes use to add more special effect and easy control.

Attributes Values Description
behavior "slide"

"scroll"
"alternate"
Start completely and stop as soon as text touches the margin.
Start completely and off one side.
Text bounce as soon as touch both side margin.
bgcolor "color code" Specifies the background color.
direction "left"
"right"
"up"
"down"
Left to Right
Right to Left
Bottom to Top
Top to Bottom
width "size" Specifies width in marquee.
height "size" Specifies height in marquee.
loop "2"
"infinite"
Loop Continues in limited times.
Loop Continues in Infinite.
scrollamount "3" Specifies Speed to scroll on the text.
scrolldelay "3" Specifies time wait long before each marquee.
hspace "size" Specifies left or right margin for outside marquee.
vspace "size" Specifies top or bottom margin for outside marquee.
Marquee Examples
Marquee Text Examples
Marquee Image Examples
Marquee Start/Stop Examples
Marquee Slow Fast Text Examples
Marquee Falling Text Examples

Use our Marquee code generator HTML Marquee Image Code Generator


Side Touch Margin Bounce Text

<html>
<head>
</head>
<body>
  <marquee behavior="alternate" direction="left">Side Touch Margin Bounce Text</marquee>
</body>
</html>

Run it...   »

Side Touch Margin Bounce Text

Upside Text Scrolling

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="up">Upside Text Scrolling</marquee>
</body>
</html>

Run it...   »

Upside Text Scrolling

Marquee Text Scrolling Speed

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left" scrollamount="3">Slow speed scroll speed</marquee>
  <marquee behavior="scroll" direction="left" scrollamount="10">Medium speed scroll speed</marquee>
  <marquee behavior="scroll" direction="left" scrollamount="17">Fast speed scroll speed</marquee>
</body>
</html>

Run it...   »

Slow speed scroll speed Medium speed scroll speed Fast speed scroll speed

Side Touch Margin Bounce Image

<html>
<head>
</head>
<body>
  <marquee behavior="alternate" direction="left">
    <img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
  </marquee>
</body>
</html>

Run it...   »

Natural

Upside Image Scrolling

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="up">
    <img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
  </marquee>
</body>
</html>

Run it...   »

Natural

Change the Image Scrolling Speed

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left" scrollamount="5">
    <img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
  </marquee>
  <marquee behavior="scroll" direction="left" scrollamount="15">
    <img src="../images/img_nat.png" width="120" height="80" alt="Natural" />
  </marquee>
</body>
</html>

Run it...   »

Natural Natural

Click and Hold to Stop Marquee

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left"
           onmousedown="this.stop();"
           onmouseup="this.start();">Click and hold the mouse marquee stop</marquee>
</body>
</html>

Run it...   »

Click and hold the mouse marquee stop

Hover to Stop Marquee

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left"
           onmouseover="this.stop();"
           onmouseout="this.start();">Hower over and hold the mouse marquee stop</marquee>
</body>
</html>

Run it...   »

Hower over and hold the mouse marquee stop

Marquee Start/Stop Buttons

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left" id="marquee1"><p>Press Button</p></marquee>
  <input type="button" value="Stop Marquee" onClick="document.getElementById('marquee1').stop();"/>
  <input type="button" value="Start Marquee" onClick="document.getElementById('marquee1').start();"/>
</body>
</html>

Run it...   »

Press Button

Click to slow Marquee speed

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left"
           onmousedown="this.setAttribute('scrollamount', 3, 0);"
           onmouseup="this.setAttribute('scrollamount', 10, 0);">Click and hold the mouse marquee speed slow</marquee>
</body>
</html>

Run it...   »

Click and hold the mouse marquee speed slow

Hover over to slow Marquee speed

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left"
           onmouseover="this.setAttribute('scrollamount', 3, 0);"
           onmouseout="this.setAttribute('scrollamount', 10, 0);">Hover over to slow Marquee Speed</marquee>
</body>
</html>

Run it...   »

Hover over to slow Marquee Speed

Marquee speed slow/fast using buttons

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left" scrollamount="6" id="marquee5">Marquee slow/medium/fast speed using buttons</marquee>
  <input type="button" value="Slower" onClick="document.getElementById('marquee5').setAttribute('scrollamount', 1, 0);" />
  <input type="button" value="Medium" onClick="document.getElementById('marquee5').setAttribute('scrollamount', 5, 0);" />
  <input type="button" value="Faster" onClick="document.getElementById('marquee5').setAttribute('scrollamount', 10, 0);" />
</body>
</html>

Run it...   »

Marquee slow/medium/fast speed using buttons

Multiple Start/Stop Marquee

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left" scrollamount="10" id="marquee2"><p>Marquee 1</p></marquee>
  <marquee behavior="scroll" direction="left" scrollamount="15" id="marquee3"><p>Marquee 2</p></marquee>
  <input type="button" value="Stop Marquee 1" onClick="document.getElementById('marquee2').stop();"/>
  <input type="button" value="Start Marquee 1" onClick="document.getElementById('marquee2').start();"/><br />
  <input type="button" value="Stop Marquee 2" onClick="document.getElementById('marquee3').stop();"/>
  <input type="button" value="Start Marquee 2" onClick="document.getElementById('marquee3').start();"/>
</body>
</html>

Run it...   »

Marquee 1

Marquee 2


Marquee Falling Text

<html>
<head>
</head>
<body>
  <marquee style="z-index:2;position:absolute;left:18px;top:97px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:200px;" scrollamount="3" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:1px;top:89px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:100px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:111px;top:7px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:302px;" scrollamount="4" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:225px;top:83px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:371px;" scrollamount="3" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:105px;top:53px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:317px;" scrollamount="2" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:168px;top:69px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:369px;" scrollamount="1" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:130px;top:117px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:289px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:176px;top:57px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:78px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:16px;top:57px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:56px;" scrollamount="5" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:300px;top:86px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:194px;" scrollamount="2" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:292px;top:10px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:251px;" scrollamount="6" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:278px;top:74px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:154px;" scrollamount="1" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:241px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:82px;" scrollamount="3" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:276px;top:32px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:70px;" scrollamount="8" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:272px;top:15px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:334px;" scrollamount="11" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:90px;top:38px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:167px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:275px;top:108px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:375px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:22px;top:76px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:12px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:89px;top:54px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;" scrollamount="2" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:26px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;" scrollamount="1" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:3px;top:44px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;" scrollamount="3" direction="down">Way2Tutorial.com</marquee> 
  <marquee style="z-index:2;position:absolute;left:300px;top:108px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:375px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:335px;top:76px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:125px;" scrollamount="7" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:400px;top:54px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;" scrollamount="2" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:355px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;" scrollamount="1" direction="down">Way2Tutorial.com</marquee>
  <marquee style="z-index:2;position:absolute;left:380px;top:44px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:375px;" scrollamount="3" direction="down">Way2Tutorial.com</marquee> 
</body>
</html>

Run it...   »

Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com Way2Tutorial.com