Creating a scrolling text effect can make your website design look more beautiful and attractive. Previously I told you how to center text in html and  today we will be looking at how to create a scrolling text effect in html using the html marquee tag.

What Is The Marquee Tag

The HTML <marquee> tag is basically a tag which is used for scrolling text or html elements in various directions. It can be used to scroll text horizontally and vertically from left to right , right to left, top to bottom, bottom to top and also to bounce the text.

NOTE : <marquee> tag is not an official HTML tag.

Scrolling Text DEMO –

This is an most basic demo of scrolling text from left to right in HTML.

0

Now let’s see various examples of scrolling text I will also show you the html code so that you can directly use it into your HTML document.

Right To Left

For making the text scroll horizontally to left (i.e from right to left ) you need to set the behavior attribute to scroll and the direction attribute to left.

&lt;marquee behavior="scroll" direction="left"&gt;
 Left Scrolling Text
&lt;/marquee&gt;

Left To Right

For making the text scroll horizontally to right (i.e from left to right ) you need to set the behavior attribute to scroll and the direction attribute to right.

&lt;marquee behavior="scroll" direction="right" &gt;
Right Scrolling Text
&lt;/marquee&gt;

Scroll Up

For making the text scroll up vertically (i.e from down to up) you need to set the behavior attribute to scroll and the direction attribute to up.

&lt;marquee behavior="scroll" direction="up" &gt;
 Up Scrolling Text
&lt;/marquee&gt;

Scroll Down

For making the text scroll vertically down (i.e from up to down) you need to set the behavior attribute to scroll and the direction attribute to down.

&lt;marquee behavior="scroll" direction="down" &gt;
 Down Scrolling Text
&lt;/marquee&gt;

Scrolling Text Speed

Next we need to control the speed of the scrolling text to do that simply add the scrollamount attribute and set to any number of pixels you want to scroll it at a time. the greater the scrollamount value the faster the speed.

&lt;marquee behavior="scroll"  scrollamount="200" direction="left"&gt;

I will scroll very fast !!

&lt;/marquee&gt;

 

Also Read : How To Create Parallax Scrolling Website.

And that’s it for now in case if you didn’t understand something or faced some issues which creating scrolling text in html do not hesitated to ask me in the comments section below. If this post helped you do support us by sharing this post on facebook, twitter, linkedin, etc.