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 Code	Result
<!-- Codes by PuStudy.Com --> <marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 80, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">Change my speed!</marquee>	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 Code	Result
<!-- Codes by PuStudy.Com --> <marquee behavior="alternate" scrollamount="80" onmousedown="this.setAttribute('scrollamount', 10, 0);" onmouseup="this.setAttribute('scrollamount', 100, 0);">Hey, slow down - I can hardly see you!</marquee>	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 Code

Result

<!-- Codes by PuStudy.Com --> <marquee behavior="scroll" direction="right" scrollamount="12" id="mymarquee"> <p>Enough buttons?</p> </marquee> <input type="button" value="Slower" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 1, 0);"> <input type="button" value="Normal Speed" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 12, 0);"> <input type="button" value="Faster" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 50, 0);">

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 Code

Result

<!-- Codes by PuStudy.Com --> <marquee behavior="scroll" direction="right" scrollamount="12" id="mymarquee2"> <p>OK now you're just showing off!!!</p> </marquee> <input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee2').stop();"> <input type="button" value="Slower" onClick="document.getElementById('mymarquee2').setAttribute('scrollamount', 1, 0);"> <input type="button" value="Normal Speed" onClick="document.getElementById('mymarquee2').setAttribute('scrollamount', 12, 0);"> <input type="button" value="Faster" onClick="document.getElementById('mymarquee2').setAttribute('scrollamount', 50, 0);"> <input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee2').start();">

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 Code	Result
<!-- Codes by PuStudy.Com --> <marquee behavior="alternate" scrollamount="100" onmouseover="this.setAttribute('scrollamount', 10, 0);" onmouseout="this.setAttribute('scrollamount', 100, 0);" onmousedown="this.stop();" onmouseup="this.start();">Hey, slow down - I can hardly see you!</marquee>	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:

width	Sets the width of the marquee	scrollamount	How far to jump as it moves
height	Sets the height of the marquee	loop	How many times it should loop
direction	Sets the direction of the marquee	bgcolor	Sets the background color of the marquee
behavior	Whether to slide, bounce, or scroll	hspace	Sets the amount of horizontal space around the marquee
scrolldelay	How long the marquee should wait before each jump	vspace	Sets the amount of vertical space around the marquee