Marquees

Sometimes you might want your text or photos to continuously "scroll" across the screen. Or maybe you'd like it to zoom in from the side, then stay there. Or perhaps you'd like it to bounce back and forth across the screen. All these things are possible using marquees.

There are two main methods for creating marquees (without using JavaScript). These are:

HTML marquees — using the HTML <marquee> tag
CSS marquees — using CSS animations

HTML `<marquee>` Tag

The <marquee> tag allows you to create marquees with a minimum of fuss. Simply add the tag, include some attributes, and there's your marquee.

See HTML marquee for more about this method.

Source Code	Result
<marquee behavior="scroll" direction="left">Scrolling text...</marquee>	Scrolling text...

In the above example, everything between the <marquee></marquee> tags scrolls across the page. You could also make the text bounce, slide—in, or you could even make a scrolling image.

CSS Animations

You can also use CSS animations to create a marquee. In fact, this is the recommended option. CSS animations are being included in the official CSS specifications (from CSS3) and it's expected that this will be the default method for creating marquees in the future.

Here's an example of using CSS animations to create the same effect as the above example.

See CSS marquee for more about this method.

Source Code	Result
<style style="text/css"> .marquee { height: 50px; overflow: hidden; position: relative; } .marquee p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position / -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); / Apply animation to this element / -moz-animation: scroll-left 5s linear infinite; -webkit-animation: scroll-left 5s linear infinite; animation: scroll-left 5s linear infinite; } / Move it (define the animation) / @-moz-keyframes scroll-left { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll-left { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes scroll-left { 0% { -moz-transform: translateX(100%); / Browser bug fix / -webkit-transform: translateX(100%); / Browser bug fix / transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); / Browser bug fix / -webkit-transform: translateX(-100%); / Browser bug fix */ transform: translateX(-100%); } } </style> <div class="marquee"> <p>Scrolling text... </p> </div>	Scrolling text...

Source Code

Result

<style style="text/css">
.marquee {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 5s linear infinite;
 -webkit-animation: scroll-left 5s linear infinite;
 animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<div class="marquee">
<p>Scrolling text... </p>
</div>

Scrolling text...

HTML Marquees vs CSS Marquees

CSS animations are the recommended option for creating marquees. This is because animations are being included in the official CSS specifications, whereas the HTML <marquee> element was never in the official HTML specifications (it is a non-standard element).

While HTML marquees are easier to code, they don't provide the range of possibilities that CSS animations do. Also, browser support for the <marquee> element is likely to be phased out in favor of CSS animations.

Therefore, CSS marquees are your best option for adding scrolling text, bouncing text, slide—in text, images, etc to your web page.

More Marquee Codes

You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:

Marquee Generator

Also check out the Marquee Generator.

Marquee Usability

Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)