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