Scrolling Text - Marquee HTML Code

This HTML term Marquee is used to create a scrolling or sliding text. The text can move across the screen horizontally or vertically at a certain speed determined by you. Note, however, that while it looks nice to have scrolling announcements, advertisements, quotations, or links, having too much animation in your Blog may distract and irritate your readers. We had earlier created a line of scrolling text in the Header of our Quotes Blog to let you have an idea what you can do for your Blog. Also, animated tags like this are not W3C-compliant. Microsoft came up with the marquee tag and while most browsers support it, W3 did not accept it. We shall be discussing this in later articles on CSS3 and JavaScript alternatives.

For this tutorial, we begin with a short explanation of what the attributes do before giving you examples of how these attributes can be applied.

Marquee Attributes

behavior="scroll" behavior="alternate" behavior="slide"

This defines how the text will move. The default is Scroll. If the behavior is not specified, the text scrolls by moving from one end to another. Where the behavior is Alternate, the text will move back and forth. The Slide seems to have the same effect as Scroll in Firefox browser. In Internet Explorer, the text under Slide may move to one end and stop.

direction="left" direction="right" direction="up" direction="down"

The default is "left", meaning that if no direction is specified, the text will move from right to left.

loop="3"

This sets the number of times the marquee will scroll. For example, in Internet Explorer, if the number is 3, the text will scroll 3 times and stop. This command might be ignored by Firefox and the text continues to scroll. For both browsers, if no value is specified or if this attribute is omitted, the marquee will scroll or loop continuously.

scrollamount="1"

This is the amount of scrolling (in pixels). If the number is 1, the text moves by 1 pixel each time and therefore scrolls at a slow pace. If this attribute is not stated, the default value is 6. The higher the number, the faster the text scrolls.

scrolldelay="100"

This is used to set the interval between each scroll movement in milliseconds. The default value is 85. Here, the higher the value, the slower the text scrolls. A value that is smaller than 60 would be ignored and replaced by the value 60. In Internet Explorer, if you really want the text to zoom at lightning speed, you can set a small delay like 20 and specify the truespeed attribute as true (see below).

truespeed="true" truespeed="false"

This tells the browser whether or not to stick to the scrolldelay values lower than 60 that you have set. The default value is false and the browser will ignore values less than 60. Set it as true if you want the browser to adhere to the low scrolldelay value and have the text scroll very fast.

bgcolor: rgb(255,0,0)">#XXXXXX"

Should you want a background color for the scrolling text, you can specify the color code into #XXXXXX. You may refer to the HTML Color Code Chart for the color codes.

height="50px" height="80%"

You can specify the height of the marquee box in pixels or percentage value. The default value is the height of the contained text.

width="200px" width="80%"

Similarly, you can set the width of the marquee box in pixels or percentage value. The default width is the width of the frame that the marquee appears in.

vspace="20px" vspace="80%"

In Internet Explorer, you can set the top and bottom margins outside the scrolling text by stating a vspace (vertical space) margin in pixels or percentage value.

hspace="20px" hspace="80%"

You can also set the left and right margins outside the scrolling text by stating a hspace (horizontal space) margin either in pixels or percentage value.

Where to place the marquee code

You can place the scrolling text either in your Header, Footer, Sidebar, or blog post.

To have it above or below the Header or Blog Posts, see that you are able to Add Page Element in the Header and Post Body.

Go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript to add the marquee code.

If you want the text to be in your Posts, just like what you see in this post, see that you are in the “Edit HTML” mode and not “Compose” mode when you add the marquee code.

Marquee HTML Code

The basic code to add is this:-

Example 1

<marquee bgcolor="#ffffcc">Text scrolls from right to left by default.</marquee>

Text scrolls from right to left by default.

Notice that by default, the text scrolls from right to left, and it loops continuously. You can of course change the background color by specifying the Hexadecimal color code under bgcolor.

Further Examples of the Marquee code, applying the attributes discussed above:-

Example 2

<marquee behavior="alternate" width="80%" bgcolor="#ffffcc">Bouncing text using the alternate behavior.</marquee>

Bouncing text using the alternate behavior.

Here, the text bounces from one side to the other and the width of the text box has been reduced to 80%.

Example 3

<marquee scrolldelay="150" direction="up" width="300px" height="100px" bgcolor="#ffffcc">Text scrolls upwards. For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>

Text scrolls upwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.

The scrolldelay has been set at 150. Increase this value if you want a slower speed.

Example 4

<marquee hspace="50%" direction="down" scrollamount="2" height="100px" bgcolor="#ffffcc">Text scrolls downwards. For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>

Text scrolls downwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.

In this example, we use scrollamount to control the speed. The higher the value, the faster the speed. In Internet Explorer, you will see the left and right margins set under hspace.

Change Font style and Color of text

Notice in the above examples that the text is black. If you want a different color or style for your text, you can set the style of the text before the marquee code. Here are some examples:-

Example 5

<span style="color:#F6358A; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">Text scrolls from left to right.</marquee></span>

Text scrolls from left to right.

What we have done here is to specify a color for the text. You can look up the Color Code Chart for more colors.

Example 6

<span style="color:#6AFB92; font-size:xx-large; font-family:fantasy; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">Text scrolls from left to right.</marquee></span>

Text scrolls from left to right.

You can set the font-family for the text. It can be a generic font like cursive, serif, monospace, fantasy and so on. It can also be a specific font family like times, arial, courier, verdana, etc. You can state the font-size as xx-small, x-small, small, smaller, xx-large, x-large, large, larger, or a percentage value.

Update:

Pause/Stop and Start a Scroll

Readers have asked whether the scrolling text can be paused when a visitor moves his mouse cursor over the text. This is useful when he wants to read the text or click a link with the text. To start and start a marquee, the additional arguments used are the "onmouseover" and "onmouseout" events to add a simple JavaScript. It will pause the scrolling text when the mouse is over it and resume the scroll when the mouse leaves the text.

Example 7

<marquee bgcolor="#ffffcc" onmouseover="this.stop()" onmouseout="this.start()">Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.</marquee>

Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.

Scrolling Link List

If you are interested in having a Scrolling Link List, we have explained how you can do it in our article on Numbered List and Bulleted List.

© Tips for New Bloggers