HTML marquee Tag

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.
AttributesValuesDescription
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>
Side Touch Margin Bounce Text

Upside Text Scrolling

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

Komentar

Postingan populer dari blog ini

Login, Session, dan Logout

Cara Membuat File Setup / Installer Aplikasi Sendiri dengan Inno Setup Compiler