Scrolling Marquees
Written by Jen

Marquess are useful when you're running out of space but you need a spot for certain messages or links. Most sites use marquees in affiliate links or important notices.

Basic Scroller
The basic scroller has pre-defined speed and size. It moves from right to left and doesn't slow down in between. This is what it looks like:

This is the text that will be scrolled along the page

This is given by the code:

<marquee>Scrolling text here</marquee> You don't need to have just text, it can be scrolling anything like images, links, tables, whatever.

Changing Direction
You can make your marquee scroll left, right, top or bottom, whatever you think wll best fit your page.

Scrolling from left to right

Scrolling from bottom to top

Just fit left, right, top or bottom as your starting point and it will start to scroll to the opposite direction.

<marquee direction="left">Scrolling text here</marquee> Changing Behaviour
Behaviours change the way the marquees move. You can have scollers that bounce back and forth, marquees that scroll then stop, or just the basic scroll.

Reload the page to see it slide properly

Bouncing back and forth

Basic scroll, not necessary to put the behaviour of this in your marquee code

And this is made by

<marquee behavior="slide" direction="left">slide then stop</marquee> <marquee behavior="alternate">back and forth</marquee> <marquee behavior="scroll">normal scroller</marquee> respectively. This can be combined with other marquee attributes like direction and background color.

Sizes and Colors
Speaking of backgrounds, marquees can look quite nice with a background. This is usually used for when you wish to highlight your scroller or when your scroller needs to match a certain layout.

Now it's got a grey background

This can be achieved using

<marquee bgcolor="#CCCCCC">Change the hex color code</marquee> You can also change the width and height of your scroller. This is most useful when you have a scroller which is moving vertically instead of horizontally.

This is a smaller marquee
But it's taller than normal
So it's useful for vertical scrolling too

<marquee width="###" height="###">Change the size of your scroller</marquee> Speed
Sometimes, your text may move too fast and people won't get the whole gist of it. Or, it may move so slowly that people become impatient. This is where speed of your marquee will be handy.

Slowest Speed

Fastest Speed

You could make up some physics questions based on this =P

The basic code is:

<marquee behavior="scroll" direction="left" scrollamount="#">Scrolling Text Here</marquee>

Where # in scrollamount="#" is replaced with any number between 1 and 50 (with 50 being the fastest).

STOP!
This isn't HTML, it's javascript, but a lot of people want to use it, and it's very handy for affiliates lists and such.

Hover over this scrolling space

This is given by the code:

<marquee behavior="scroll" direction="left" onmouseover='this.stop()' onmouseout='this.start()'>Hover over this scrolling space</marquee>

Other Functions
You can combine your marquee with positioning tags like centering it. You can have anything in your marquee, even textareas! The basic marquee is the width of your page (which resizes along with the page if you maximise or minimise your window).