HTML Marquee Scrolling Text


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

Horizontally Scrolling Marquee

Bouncing Text Marquee

<marquee behavior="alternate" scrollamount="2" bgcolor="#cccccc" width="100%"><a href="">This is an example of bouncing text</a>.</marquee>

Bouncing Text Marquee Browser View

This is an example of bouncing text.

Vertically Scrolling Marquee

<marquee bgcolor="#000080" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=2" scrollamount="2" direction="up" loop="true" width="30%">
<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>

Vertically Scrolling Marquee Browser View









Vertically Scrolling Marquee

<marquee onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=2"bgcolor="#ffffff" scrollamount="2" direction="down" loop="true" width="30%" height="100">
<font size="+1"><strong>Text scrolling down</strong></font><p>
<a href="">Sample link</a>


Vertically Scrolling Marquee Browser View

Text scrolling down

Sample link


Scrolling Image Marquee

<marquee behavior="scroll" direction="right"><img src="yourimage.gif" width="114" height="94" /></marquee>

Scrolling Image Marquee Browser View

HTML Marquee

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:

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.

A list of HTML tags.

HTML 5 Tags
A list of the latest HTML tags to be developed.

Special text characters and code for your web page.