All Scrolling Text HTML codes

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:

Your slide-in text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>

Continuous scrolling text (RTL)

Example:

look! Your continuous scroll text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="left">look! Your continuous scroll text goes here</marquee>

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:

Your continuous scrollable text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here</marquee>

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:

Your slide-in text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="slide" direction="right">Your slide-in text goes here</marquee>

Continuous scrolling text (LTR)

Example:

Your continuous scrolling text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="right">Your continuous scrolling text goes here</marquee>

Faster Scrolling

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

Example:

Your continuous scrolling text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="right" scrollamount="30">Your continuous scrolling text goes here</marquee>

Text bouncing back and forth:

Normal Speed

This text bounces at the default speed.

Example:

Your bouncing text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="alternate">Your bouncing text goes here</marquee>

Faster Bounce

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

Example:

Your fast bouncing text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="alternate" scrollamount="30">Your fast bouncing text goes here</marquee>

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:

Your upward scrolling text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

Text Scrolling Down:

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

Example:

Your downward scroller text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="down">Your downward scroller text goes here</marquee>

Various Scrolling Speeds:

This example demonstrates 3 different scrolling speeds.

Example:

Tortoise Hare Cheetah

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="right" scrollamount="1">Tortoise</marquee> <marquee behavior="scroll" direction="right" scrollamount="10">Hare</marquee> <marquee behavior="scroll" direction="right" scrollamount="20">Cheetah</marquee>

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:

look! Your continuous scroll text goes here

Code:

<!-- HTML codes by Design4webs.blogspot.com --> <marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">look! Your continuous scroll text goes here</marquee>

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