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!

Note that, although the <marquee> tag isn't an offical HTML tag, it is recognized by most of today's browsers. If you can't view the examples, it's likely that your browser doesn't support the <marquee> tag.

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:

CodeResult

Your slide-in text goes here

Continuous scrolling text (RTL)

Example:

CodeResult

Your continuous scroll text goes here

Faster Scrolling

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

Faster scrolling works better on continuous scrolling as opposed to slide-in text. This is because slide-in text stops after sliding in. If it slides in too fast, many users might miss the slide-in effect altogether.

Example:

CodeResult

Your continuous scrollable text goes here

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:

CodeResult

Your slide-in text goes here

Continuous scrolling text (LTR)

Example:

CodeResult

Your continuous scrolling text goes here

Text bouncing back and forth:

Normal Speed

This text bounces at the default speed.

Example:

CodeResult

Your bouncing text goes here

Faster Bounce

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

Example:

CodeResult

Your fast bouncing text goes here

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:

CodeResult

Your upward scrolling text goes here

Text Scrolling Down:

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

Example:

CodeResult

Your downward scroller text goes here

Various Scrolling Speeds:

This example demonstrates 3 different scrolling speeds.

Example:

CodeResult

Tortoise Hare Cheetah

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:

CodeResult

Your continuous scroll text goes here

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:

widthSets the width of the marqueescrollamountHow far to jump as it moves
heightSets the height of the marqueeloopHow many times it should loop
directionSets the direction of the marqueebgcolorSets the background color of the marquee
behaviorWhether to slide, bounce, or scrollhspaceSets the amount of horizontal space around the marquee
scrolldelayHow long the marquee should wait before each jumpvspaceSets the amount of vertical space around the marquee

Falling Text

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

ScrollScrolling text effects......cool!Scrolling text effects...Scroll...Scrolling text...Text effects...Marquees...Scrolling text effects...Scrolling effects...MarqueesScrolling effects...Scrolling text...effects...Scrolling text effects...Scrolling text effects...Snow effects...Snow?Rain?Confetti?Scrolling text effects...

More Scrolling Text/Marquee Codes

Here are more resources for scrolling text and images:

CSS Marquees

The above examples use the HTML marquee tag to create the scrolling effect. CSS 3 - the latest version of Cascading Style Sheets - allows you to create scrolling text 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:

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad
Webydo Banner Ad