HTML Code for moving/scrolling text

HTML <marquee> Element

The following examples use the HTML <marquee> tag. As with the CSS method, the HTML method can also be used to give the text a horizontal scroll (from right to left, left to right), a vertical scroll (top to bottom, or bottom to top), as well as a bounce effect.

Non-Standard Tag

The <marquee> tag isn't an offical HTML 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.

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

Example:

Your scrolling text goes here

Continuous scrolling text (RTL)

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

Example:

Your scrolling 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.

<marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here</marquee>
<marquee behavior="scroll" direction="left" scrollamount="30"></marquee>

Example:

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.

<marquee behavior="slide" direction="right">Your slide-in text goes here</marquee>
<marquee behavior="slide" direction="right"></marquee>

Example:

Your slide-in text goes here

Continuous scrolling text (LTR)

<marquee behavior="scroll" direction="right">Your slide-in text goes here</marquee>
<marquee behavior="scroll" direction="right"></marquee>

Example:

Your slide-in text goes here

Text bouncing back and forth

Normal Speed

This text bounces at the default speed.

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

Example:

Your bouncing text goes here

Faster Bounce

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

<marquee behavior="alternate" scrollamount="30">Your fast bouncing text goes here</marquee>

Example:

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".

<marquee behavior="scroll" direction="up" style="height: 200px;">Your upward scrolling text goes here</marquee>
<marquee behavior="scroll" direction="up" style="height: 200px;"></marquee>

Example:
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.

<marquee behavior="scroll" direction="down" style="height: 200px;">Your downward scroller text goes here</marquee>
<marquee behavior="scroll" direction="down" style="height: 200px;"></marquee><marquee behavior="scroll" direction="down" style="height: 200px;"></marquee>

Example:

Your downward scroller text goes here