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 HTMLcodes.me --> <marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 80, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">Change my speed!</marquee> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/marquee-speed.cfm">Marquee speed code</a></p>	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 HTMLcodes.me --> <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> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/marquee-speed.cfm">Marquee speed code</a></p>	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 HTMLcodes.me -->
            <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);">
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/marquee-speed.cfm">Marquee speed code</a></p>

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 HTMLcodes.me -->
            <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();">
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/marquee-speed.cfm">Marquee speed code</a></p>

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 HTMLcodes.me -->
            <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>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/marquees/marquee-speed.cfm">Marquee speed code</a></p>

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