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>
Upside Text Scrolling
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="up">Upside Text Scrolling</marquee>
</body>
</html>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>