Scrolling Text

This page contains copy/paste codes for scrolling text.

The easiest way to create scrolling text is to use the HTML <marquee> tag. You give your text a horizontal scroll (from right to left, left to right) or a vertical scroll (top to bottom, or bottom to top) - it's your choice!

Right to Left (RTL)

This section contains text that scrolls horizontally (right to left, left to right, or a combination). As you can see, there are a number of options with your horizontal scroll.

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.

Example:

Code:

Continuous scrolling text (RTL)

Example:

Code:

Faster Scrolling

This example uses scrollamount="30" to increase the scroll speed.

Example:

Code:

Left to Right (LTR)

Slide-In Text

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

Example:

Code:

Continuous scrolling text (LTR)

Example:

Code:

Faster Scrolling

This example uses scrollamount="30" to increase the scroll speed.

Example:

Code:

Text bouncing back and forth:

Normal Speed

This text bounces at the default speed.

Example:

Code:

Faster Bounce

This example uses scrollamount="30" to speed up the scrolling/bouncing text.

Example:

Code:

Text Scrolling Up:

This text has a vertical scroll - it starts at the bottom and moves up. As with some of the previous examples, you can adjust the scroll speed by using the scrollamount attribute. You could also create a vertical slide by using behavior="slide".

Example:

Code:

Text Scrolling Down:

This text also has a vertical scroll, but this time it starts at the top and moves down.

Example:

Code:

Various Scrolling Speeds:

This example demonstrates 3 different scrolling speeds.

Example:

Code:

Jumping Text

The following example uses the scrolldelay attribute to slow the scrolling text down and make it look like it's jumping across the screen. Actually, the example also uses the scrollamount attribute to increase the size of each jump.

Example:

Code:

Marquee Attributes

The <marquee> tag accepts a number of attributes (some of which are included in the above examples). Feel free to experiment with these settings to see the effect they have on your scrolling text. The full list of attributes are:

Falling Text

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

More Scrolling Text/Marquee Codes

Here are more resources for scrolling text and images:

• Scrolling Images
• Marquee generator
• The Falling Text Generator (as above)
• The Falling Object Generator
• Start/stop your scrolling text