Rolling and floating text in HTML




What is it all about?

For newer browsers that are able to use CSS3 there is a tag named MARQUEE, with which you can do rolling and floating texts. Because it is a CSS3 feature, you have to be aware that visitors using older browsers can't always see the text or the effect. It is mostly the attributes that poses a problem. That itself apparently goes back to HTML 4.01, but the present form with all the attributes is new. Therefore: make sure to test that the desired effect works a far back in browser versions as you deem necessary.




For the tag you have the following attributes:

behaviorSetting how the text scrolls in the marquee. The attribute can have three values: scroll, slide and alternate. Default value is scroll.
bgcolorSetting the background color. HTML 5 is generally not too happy with this attribute, and it can be done using STYLE="background-color:", so use STYLE instead.
directionSetting the direction of the scrolling of the marquee. The attribute can have the following values: left, right, up, down. Default value is left.
heightSetting the height, either in px, em, cm or mm. HTML 5 is generally not too happy with this attribute, and it can be done using STYLE="height:", so use STYLE instead.
hspaceSetting the horizontal margin. HTML 5 is generally not too happy with this attribute, and it can be done using STYLE="margin:", so use STYLE instead.
loopSetting the number of times the marquee scrolls over the screen. Default value is -1, i.e. the will continue forever.
scrollamountControls how many pixels the marquee moves at a time. Default value is 6.
scrolldelaySetting the interval between movements in the scrolling in milliseconds. Default value is 85 and minimum value is 60. Values below 60, will be increased to 60, unless TRUESPEED is declared.
truespeedAs a general rule, SCROLLDELAY values below 60 will be increased to 60, but if you declare TRUESPEED, the lower value is accepted. TRUESPEED has to value, e.g. TRUESPEED="yes", as could be expected, so it only needs to say TRUESPEED in the tag, to make it work.
vspaceSetting the vertical margin. HTML 5 is generally not too happy with this attribute, and it can be done using STYLE="margin:", so use STYLE instead.
widthSetting the width, either in px, %, em, cm or mm. HTML 5 is generally not too happy with this attribute, and it can be done using STYLE="width:", so use STYLE instead.


For the tag, you have the following event handler:

onbounceExecuted when the marquee has reached the end of its scrolling. This can only be done when BEHAVIOR has been set to alternate.
onfinishExecuted when the marquee has scrolled over the screen the specified number of times. Only works when the LOOP attribute has a value higher than 0.
onstartStarts when the marquee starts scrolling.


For the tag, you have the following methods:

startStart the scrolling of the marquee. Does not work for all browsers.
stopStops the scrolling of the marquee. Does not work for all browsers.


Let's have a look at some examples, so it makes sense.





What does it look like?

The examples are done a pure text, but there are no limitations to what you can insert into the marquee.

If we start with the attribute BEHAVIOR:

This text is done with scroll.

This text is done with slide.

This text is done with alternate.

Notice that slide only makes the text slide into place.


The attribute DIRECTION controld the direction:

This text is done with DIRECTION="right".

This text is done with DIRECTION="down".


The attribute SCROLLAMOUNT controls how many pixels the marquee moves at a time. The lower the setting, the smoother the scrolling, but it also lowers the speed, so here you have to compensate. Optimal value for SCROLLAMOUNT has to be found in unison with the speed SCROLLDELAY:

This text is done with SCROLLAMOUNT="2".

This text is done with SCROLLAMOUNT="8".


The attribute SCROLLDELAY the time between movements of the text, i.e. the scrolling speed. For this attribute there is a difference between browsers, so here you have to make sure you test on all browsers.

The specified value is the time between movements in milliseconds, so the lower the value the higher the speed. SCROLLDELAY don't just allow times below 60 milliseconds, so if you specify e.g. 25 milliseconds, the speed will set to 60 on some browsers. If you need shorter/faster movements than the 60 milliseconds, so it works on the most common browsers, you can declare TRUESPEED, which is an attribute with no variables. You simply write TRUESPEED in the tag (see the example below). Optimal value for SCROLLDELAY has to be found in unison with SCROLLAMOUNT, which specify how far the content moves each time the content is moved.

A couple of examples:

This text is done with SCROLLDELAY="60".

This text is done with SCROLLDELAY="50".

This text is done with SCROLLDELAY="50" TRUESPEED.


ONBOUNCE is an event triggered attribute, like ONCLICK and ONMOUSEOVER. When the object hits the edge and changes direction, something is done. Here it's a small JavaScript, changing the background color (red/green), when the object hits the edge:

Color change at bounce.


ONSTART ans ONFINISH are doing exactly the same thing, except ONSTART only start once, when the marquee start rolling, and ONFINISH don't do anything until the marquee stops. These three attributes don't work for all browsers, so in general it is recommended not to use them.


The marquee can be started and stopped using a JavaScript. It can something like a button, or just at MOUSEOVER. In the original form, it is supposed to start and stop with this.start() and this.stop(). The code could look like this:

<MARQUEE ONMOUSEOVER="this.stop()" ONMOUSEOUT="this.start()" BEHAVIOR="alternate">This text may stop at MOUSEOVER.</MARQUEE>

On the screen it looks like this:

This text may stop at MOUSEOVER.

This, however, doesn't work on all browsers, so the official solution don't actually work. Fortunately there is a workaround. You can do a setAttribute() on SCROLLAMOUNT set to 0, when the object has to stop and a similar setAttribute() on SCROLLAMOUNT for when the object has to continue. In itself it is not a good solution, as not all browsers handle the command really well and the content start fluttering at stop, but by combining the two ways of stopping the scrolling, you get a nice result that works on all browsers.

The code for this could look like this:

<MARQUEE SCROLLAMOUNT="5" ONMOUSEOVER="this.setAttribute('SCROLLAMOUNT', 0); this.stop()" ONMOUSEOUT="this.setAttribute('SCROLLAMOUNT', 5); this.start()" BEHAVIOR="alternate" >This text will stop at MOUSEOVER.</MARQUEE>

For some reason the order for the two ways of doing it is important. If you switch sequence around, it doesn't work on Firefox. On the screen it looks like this:

This text will stop at MOUSEOVER.

Floating combinations/text

Because there are no limitations to what you can put in a MARQUEE, you can, by inserting one MARQUEE in another, get the effect of a text/object floating around in an area. Both MARQUEE has BEHAVIOR="alternate" so the text moves back and forth in the direction of movement, and one MARQUEE makes the text scroll vertically while the other makes the text scroll vertically.

The code could look like this:

<MARQUEE DIRECTION="down" BEHAVIOR="alternate" STYLE="width:400px; height:300px">
<MARQUEE BEHAVIOR="alternate">This text floats.</MARQUEE>
</MARQUEE>

On the screen it looks like this:

This text floats between the borders.

By playing around a little e.g. only having BEHAVIOR="alternate" on the vertical movement, and having different speeds in the two directions, you can obtain some curious effects, e.g.:

This text floats between and through the borders.