Scrolling text HTML code

Learn how to add scrolling text on your site or web page. Read this guide and you can make text to move horizontal or vertical. You just need to copy scrolling text HTML code from this page, adjust copied code and paste it to your HTML page.

To add scrolling text or images on web page use MARQUEE HTML tag. MARQUEE tag can work well for announcements. So, with MARQUEE tag you can easily get animated text effect on your page.

Take a look at scrolling text sample made with MARQUEE HTML code:

  MARQUEE scrolling text

  Link to my blog

In this tutorial you will find:

• Simple scrolling text HTML code sample


• How to change direction of animated text


• Change style of scrolled text


• How to stop scrolling on mouse over Marquee control


• guide for implementing Marquee on blogspot (blogger)

Simple scrolling text HTML code sample

Code for scrolling text from left to right:

<marquee direction="right" behavior="scroll" scrollamount="1" >Simple marquee sample</marquee>

Result:

Simple marquee sample


Marquee direction attribute

Animated text can move left to right, right to left, up to down or down to up. Direction :

• left - text is moving right to left


• right - text is moving left to right


• up - text is scrolled upward


• down - text is scrolled form up to down

Scrollamount attribute - how fast text will be scrolled, higher number faster is scrolled

Change style of MARQUEE tag

You will probably want to limit area of Marquee effect on your site. You can do it with style attribute inside your MARQUEE HTML tag. You need to use height and width property. If you want visible border of your rectangle add border property to your style attribute.

Sample HTML code for MARQUEE limited to rectangle 100 x 200 with thin black border:

<marquee style="border: thin solid rgb(0, 0, 0); height: 100px; width: 200px;" direction="up">&nbsp;<a href="http://interestingwebs.blogspot.com/">Link to my blog</a></marquee>

Result:
 Link to my blog

You can use Marquee code HTML generator by clicking this link.

Stop scrolling when a mouse is over Marquee area

How to stop scrolling when a mouse hover scrolling text? To accomplish this task javascript event onmouseover will be used. Also javascript event onmouseout will be used to continue scrolling when mouse pointer lost focus of Marquee. To see how this work check first scrolling text sample at beginning of this article.

Sample code for stop scrolling text when mouse is over text and start scrolling text when focus is lost:

<marquee direction="right" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">Simple marquee sample</marquee>

Tutorial for implementing Marquee on blogger (blogspot)

Add HTML code for Marquee element to blogger sidebar (for help visit this article : How to add HTML or JavaScript gadget to blogger

Here is code for Marquee sample from beginning of the article:

<marquee style="border: thin solid rgb(0, 0, 0); height: 120px; width: 200px; background-color: rgb(255, 255, 255); font-family: Arial; font-size: 10pt; color: rgb(0, 0, 0);" direction="up" behavior="scroll" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">&nbsp; MARQUEE scrolling text<br /><br />&nbsp; <a href="http://interestingwebs.blogspot.com/">Link to my blog</a></marquee>

Marquee HTML tag can be used for announcements, but be carefully, one can be OK, but if there are too many visitor can get headache.

Bad news is that Marquee tag is obsolete in HTML5. To find out how to achieve HTML5 scrolling text effect visit article: HTML5 scrolling text.