Marquees Tutorial

Made by: Nick

Marquees are something I get asked about occasionally and I really don't see why. I think of them as a bit of joke code like the blink tag was intended to be and do not support people using them at all on any website. People should also note that they are deprecated now and so will not validate for web standards. With that said visitors to this site have asked about them (mostly for use on Myspace which I guess is fair enough) and I said I would make a tutorial so here it goes.

Oh also please do note that marquees on a website will make your page load times a considerable bit longer. Use at your own risk.

<marquee>Your Text or Picture</marquee>

Speed


The speed of your marquee can be controlled by adding the scrollamount attribute:

<marquee scrollamount="1">Your Text or Picture</marquee>

<marquee scrollamount="5">Your Text or Picture</marquee>

As you can see increasing the amount makes your marquee go faster.

ScrollDelay


You can also make your marquee scroll slower by adding the scrolldelay attribute:

<marquee scrolldelay="100">Your Text or Picture</marquee>

<marquee scrolldelay="300">Your Text or Picture</marquee>

As you can see increasing the amount makes your marquee scroll slower (and more jerky).

Behaviour


You can control the behaviour of your marquee by adding the behaviour attribute:

<marquee behavior="scroll">Your Text or Picture</marquee>

<marquee behavior="slide">Your Text or Picture</marquee>

<marquee behavior="alternate">Your Text or Picture</marquee>

As you can see there are three different behaviours you can add - scroll which is the default value for a marqueee, slide which makes the marquee come in from one point and stop and alternate which moves the marquee from side to side (bouncing off the edges).

Direction


To give your marquees some direction you simply add the direction attribute:

<marquee direction="right">Your Text or Picture</marquee>

<marquee direction="up">Your Text or Picture</marquee>

<marquee direction="down">Your Text or Picture</marquee>

The four directions are as follows: left (the default), right, up and down. Simple really.

Other Attributes


<marquee height="XXX">Your Text or Picture</marquee> controls the height of your marquee. Note the number is in pixels.

<marquee width="XXX">Your Text or Picture</marquee> controls the width of your marquee. Note the number is in pixels.

<marquee hspace="XXX">Your Text or Picture</marquee> controls the horizontal space around your marquee. Note the number is in pixels.

<marquee vspace="XXX">Your Text or Picture</marquee> controls the vertical space around your marquee. Note the number is in pixels.

<marquee loop="XXX">Your Text or Picture</marquee> controls the number of times your marquee will happen where -1 and infinate values mean that the marquee will just keep going.

Incase it isn't obvious you can add more than one attribute to your marquee to add more than one effect (obviously only one of the same attribute, but you can add multiple different attributes - e.g. height, width, behaviour, direction).

Thats all I can think of for now about marquees. You really don't want to use them on any real website - I can understand those of you who want to use it on Myspace but other than that I wouldn't recommend it.

Feed the Dragon MySpace Tutorials