HTML Marquee Scrolling Text
The HTML MARQUEE tag is used to scroll text vertically or horizontally within a web page.
You can change the marquee background color, width, the number of times your message will scroll, and the speed that your text scrolls, by adding the following attributes within your MARQUEE tag.
Marquee Attributes
BGCOLOR="#CCCCCC" – background color
LOOP – Determines how many times the text will scroll. -1 is indefinite and will continuously scroll. You can set this to whatever you’d like.
SCROLLAMOUNT – Determines the speed your text will scroll.
WIDTH – Determines the width of your marquee.
HEIGHT – Determines the height of your marquee.
Direction – Determines the direction in which the text should scroll – up or down.
Horizontal Scrolling Text Marquee
<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Horizontally Scrolling Marquee</marquee>
Horizontal Scrolling Text Marquee Browser View
Bouncing Text Marquee
<marquee behavior="alternate" scrollamount="2" bgcolor="#cccccc" width="100%"><a href="http://www.yourdomain.com">This is an example of bouncing text</a>.</marquee>
Bouncing Text Marquee Browser View
Vertically Scrolling Marquee
<div>
<marquee bgcolor="#000080" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=2" scrollamount="2" direction="up" loop="true" width="30%">
<center>
<font color="#ffffff" size="+1">SCROLLING TEXT</font><p>
<font color="#ff0000" size="+1">UPWARD</font><p>
<font color="#ffffff" size="+1">IS ONE WAY</font><p>
<font color="#ffffff" size="+1">TO MAKE YOUR</font><p>
<font color="#ffffff" size="+1">SITE</font><p>
<font color="#ff0000" size="+1">STAND OUT</font><p>
<font color="#ffffff" size="+1">FROM THE REST!</font>
</center>
</marquee>
</div>
Vertically Scrolling Marquee Browser View
UPWARD
IS ONE WAY
TO MAKE YOUR
SITE
STAND OUT
FROM THE REST!
Vertically Scrolling Marquee
<div>
<marquee onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=2"bgcolor="#ffffff" scrollamount="2" direction="down" loop="true" width="30%" height="100">
<center>
<font size="+1"><strong>Text scrolling down</strong></font><p>
<a href="http://www.web-source.net">Sample link</a>
</center>
</marquee>
</div>
Vertically Scrolling Marquee Browser View
Scrolling Image Marquee
<marquee behavior="scroll" direction="right"><img src="yourimage.gif" width="114" height="94" /></marquee>
Scrolling Image Marquee Browser View
This HTML marquee is completely customizable. Change the attributes to create the scrolling text effect you desire.
Give it a try…
To view the results below, after making changes to the above code, place your cursor at the end of the code and press your space bar on your keyboard.
Here’s the result…
This concludes the HTML marquee scrolling text code.
Visit the following pages for a wealth of copy and paste codes and tips:
HTML Tips
Copy and paste special effect HTML codes for your web page.
HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.
HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.
JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.
Web Design Tips
Tips, tricks, and special effect codes for your web page.
HTML Tags
A list of HTML tags.
HTML 5 Tags
A list of the latest HTML tags to be developed.
ASCII Codes
Special text characters and code for your web page.