Rolling and floating text in HTML

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:

behavior	Setting how the text scrolls in the marquee. The attribute can have three values: scroll, slide and alternate. Default value is scroll.
bgcolor	Setting 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.
direction	Setting the direction of the scrolling of the marquee. The attribute can have the following values: left, right, up, down. Default value is left.
height	Setting 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.
hspace	Setting 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.
loop	Setting the number of times the marquee scrolls over the screen. Default value is -1, i.e. the will continue forever.
scrollamount	Controls how many pixels the marquee moves at a time. Default value is 6.
scrolldelay	Setting 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.
truespeed	As 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.
vspace	Setting 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.
width	Setting 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:

onbounce	Executed when the marquee has reached the end of its scrolling. This can only be done when BEHAVIOR has been set to alternate.
onfinish	Executed 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.
onstart	Starts when the marquee starts scrolling.

For the tag, you have the following methods:

start	Start the scrolling of the marquee. Does not work for all browsers.
stop	Stops the scrolling of the marquee. Does not work for all browsers.

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

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:


Notice that slide only makes the text slide into place.


The attribute DIRECTION controld the direction:



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:



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:



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:



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:


On the screen it looks like this:


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:


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:

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:


On the screen it looks like this:


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.: