Marquee Speed

This article contains code to speed up and slow down your HTML marquee. It demonstrates how to programatically speed up and slow down a marquee using HTML combined with JavaScript. Feel free to copy and paste the code into your own website, blog, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

Change Marquee Speed with Cursor

In the first couple of examples, we speed up the marquee by hovering or clicking the marquee with the cursor (i.e. with our mouse). To change the marquee speed, we use JavaScript to change the value of the scrollamount attribute. Specifically, we use JavaScript's setAttribute() method.

Change Marquee Speed on Hover

Here, the user can speed up the marquee by hovering over it. The marquee slows down to normal speed once the user moves the cursor away from the marquee.

We do this by using the onmouseover event. The actual JavaScript code looks like this onmousedown="this.setAttribute('scrollamount', 80, 0);". To slow the marquee to normal speed, we use the onmouseout event, and simply change the scrollamount back to its original value (i.e. onmouseup="this.setAttribute('scrollamount', 12, 0);").

Source CodeResult
Change my speed!

Change Marquee Speed on Click

In this example, the user can change the marquee speed by clicking it. This time the marquee slows down when the mouse button is pressed and it speeds up again when the mouse is released.

This code uses the onmousedown event. To restart it, we use the onmouseup event. Oh, and just to keep things interesting, let's change the marquee behavior to alternate (so that it bounces back and forth).

Source CodeResult
Hey, slow down - I can hardly see you!

Change Marquee Speed with Buttons

Here, we use buttons to change the speed of the marquee. We've got three buttons; one to slow it down, one to speed it up, and one to put it back to the normal speed. Here's a snippet of the JavaScript used to speed the marquee up: document.getElementById('mymarquee').setAttribute('scrollamount', 50, 0);. The 50 represents the scrollamount that we want the marquee to change to (i.e. the marquee's speed).

Source CodeResult

Enough buttons?

Stop, Start, Change Speed...

Here we add a Stop button and a Start button. No prizes for guessing what these do!

If you're interested in stopping your marquee, check out this article on how to programatically stop a marquee.

Source CodeResult

OK now you're just showing off!!!

Combine Click and Hover

If you don't like the idea of having so many buttons lined up under your marquee, you could acheive the same effect by using click and hover instead of the buttons. Like this:

Source CodeResult
Hey, slow down - I can hardly see you!

Note for MySpace users: If you have a MySpace page, you won't be able to speed up/slow down your marquee using this code. This is because MySpace doesn't allow JavaScript codes. You can still use the HTML marquee code (for displaying a marquee), just not the JavaScript code (which controls the speed).

Marquee Attributes

The <marquee> tag accepts a number of attributes (some of which are included in the above examples). Feel free to experiment with these settings to see the effect they have on your scrolling text. The full list of attributes are:

widthSets the width of the marqueescrollamountHow far to jump as it moves
heightSets the height of the marqueeloopHow many times it should loop
directionSets the direction of the marqueebgcolorSets the background color of the marquee
behaviorWhether to slide, bounce, or scrollhspaceSets the amount of horizontal space around the marquee
scrolldelayHow long the marquee should wait before each jumpvspaceSets the amount of vertical space around the marquee