HTML Marquee Code

You can create a scrolling marquee (i.e. scrolling text or scrolling images) by using the <marquee> tag. You can make the text/images scroll from right to left, left to right, top to bottom, or bottom to top - it's your choice!

Example Marquee Code

Note that if you can't view the examples, it's likely that your browser doesn't support the marquee tag.

Slide-in text:

This text slides in from the right, then stays where it is. You will need to refresh this page to see the effect again.

Code	Result
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>	Your slide-in text goes here

Continuous scrolling text:

Code	Result
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>	Your scrolling text goes here

Text bouncing back and forth:

Code	Result
<marquee behavior="alternate">Your bouncing text goes here</marquee>	Your bouncing text goes here

Text Scrolling Upwards:

Code	Result
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>	Your upward scrolling text goes here

Change the Scrolling Speed:

Code	Result
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>	Slow scroll speed Medium scroll speed Fast scroll speed

Scrolling Images:

Simply replace the src="... part with the location of your own image.

Code	Result
<marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100" height="100" alt="smile" /></marquee>

Images & Text (Both Scrolling):

Simply add your text under the image tag (but still within the marquee tags).

Code	Result
<marquee behavior="scroll" direction="left"> <img src="/pix/smile.gif" width="100" height="100" alt="smile" /> <p>Sample text under a <a href="http://www.quackit.com/html/codes/html_marquee_code.cfm">Marquee image</a>.</p> </marquee>	Sample text under a Marquee image.

Cool Effects with Marquees!

You can use HTML marquees for some cool effects. Check out this falling text (generated with the Falling Text Generator)...

More Marquee Tricks

Here are more tricks you can use with your marquees:

• Falling Text (as above)
• Falling Images
• Start/stop your HTML Marquees
• Slow down your HTML Marquees
• Scrolling Images
• Marquee Generator

CSS Marquees

The above examples use the HTML marquee tag to create the marquee effect. CSS 3 - the latest version of Cascading Style Sheets - allows you to create marquees using CSS. Although at the time of writing, browser support for CSS marquees was limited, the following pages show how HTML marquees will be handled in the future:

• CSS marquee-style property
• CSS marquee-speed property
• CSS marquee-play-count property
• CSS marquee-direction property
• CSS overflow-style property

Also See...

You might also be interested in these pages:

• Marquee Generator
• HTML Color
• HTML Codes

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/Html/Codes/Html_marquee_code.Cfm">HTML Marquee Code</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!