Scrolling Text

There are two easy ways to add scrolling text to a web page (without using JavaScript). These are:

HTML Scrolling Text — using the HTML <marquee> tag
CSS Scrolling Text — using the CSS animations

This page outlines both methods and explains the pros and cons of each method.

HTML Scrolling Text

You can create scrolling text using the HTML <marquee> tag. Below is an example of using the HTML <marquee> tag to create scrolling text.

See HTML Scrolling Text for more examples.

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

This method is nice and easy to implement—you can create scrolling text with a single line of code. The <marquee> tag is supported by the major browsers.

The main disadvantage of the <marquee> tag is that it's non-standard HTML. It is not actually included in the official HTML specifications. This is mainly because the marquee effect is more suited towards Cascading Style Sheets (CSS). CSS animations were introduced in CSS3 and allow you to create scrolling text and other animated effects. Therefore, CSS looks like the way of the future for scrolling text.

CSS Scrolling Text

The CSS animation property and @keyframes rule allow us to create scrolling text (not to mention other, more advanced, animated effects).

Creating scrolling text with CSS is a little more involved, however, you have a wider range of options available to you.

The following example creates a similar result to the above method, but as you can see, it requires a lot more code. Don't be put off by this though. The following code uses browser prefixes to ensure that the text scrolls correctly in various browsers, however, it's pretty safe to remove these prefixes, as most browsers now support CSS animations without prefixes.

See CSS Scrolling Text for more examples.

Source Code	Result
<style> .scroll-left { height: 50px; overflow: hidden; position: relative; } .scroll-left 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 10s linear infinite; -webkit-animation: scroll-left 10s linear infinite; animation: scroll-left 10s 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="scroll-left"> <p>CSS scrolling text... </p> </div>	CSS scrolling text...

Source Code

Result

<style>
.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.scroll-left 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 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s 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="scroll-left">
<p>CSS scrolling text... </p>
</div>

CSS scrolling text...

While CSS animations are a little more complex to learn and code than HTML marquees, they do provide a powerful means of animating the various HTML elements on the page. They are also being implemented into the CSS specifications (as from CSS3) and therefore, if you want your code to be standards-compliant, then you will need to use the CSS method.

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 :)