This page contains copy/paste codes for scrolling text.
The easiest way to create scrolling text is to use the HTML
Example:
Code:
Code:
Code:
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:
Code:
Example:
Code:
Example:
Code:
Example:
Code:
Example:
Code:
Example:
Code:
Example:
Code:
The following example uses the
Example:
Code:
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:
Continuous scrolling text (RTL)
Example:Faster Scrolling
This example usesscrollamount="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: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:
Continuous scrolling text (LTR)
Example:Faster Scrolling
This example usesscrollamount="30"
to increase the scroll speed.Example:
Text bouncing back and forth:
Normal Speed
This text bounces at the default speed.Example:
Faster Bounce
This example usesscrollamount="30"
to speed up the scrolling/bouncing text.Example:
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 thescrollamount
attribute. You could also create a vertical slide by using behavior="slide"
.Example:
Text Scrolling Down:
This text also has a vertical scroll, but this time it starts at the top and moves down.Example:
Various Scrolling Speeds:
This example demonstrates 3 different scrolling speeds.Example:
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:
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:width | Sets the width of the marquee | scrollamount | How far to jump as it moves |
height | Sets the height of the marquee | loop | How many times it should loop |
direction | Sets the direction of the marquee | bgcolor | Sets the background color of the marquee |
behavior | Whether to slide, bounce, or scroll | hspace | Sets the amount of horizontal space around the marquee |
scrolldelay | How long the marquee should wait before each jump | vspace | Sets the amount of vertical space around the marquee |