Marquee Codes

This page contains marquee codes. Feel free to copy and paste the marquee codes into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Continuous Scrolling Marquee Code

The following example demonstrates what the basic HTML marquee code does. The marquee tag allows stuff (i.e. text, images, etc) to scroll across the page.

Using behavior="scroll" sets the marquee to scroll continuously - that is, every time the text has scrolled all the way across, it starts again. It's basically in a loop. We set its direction using the direction.

Horizontal Marquee

This HTML marquee is scrolling horizontally from right to left. Although this tends to be the default, you can specify direction="left" in the HTML code. You can also set it to right, up, and down (see below).

Source CodeResult
Your left scrolling marquee text goes here

Vertical Marquee Code

Here, the text scrolls upward. This is acheived by using both behavior="scroll" and direction="up". You could change this to direction="down" if you prefer.

Source CodeResult
Your vertically scrolling marquee text goes here

Slide-in Marquee Code

This example sets the text to slide in, and then stay there. It doesn't loop continuously like the above examples. It simply slides in, then stops. This is acheived by using behavior="slide".

Tip: If you don't see the text sliding in here, refresh the page - the text probably slid in before you noticed it!

Source CodeResult
Your marquee (slide-in) text goes here

Bouncing Marquee Code

Here, the text bounces back and forth. This is acheived by using behavior="alternate".

Source CodeResult
Your bouncing marquee text goes here

Marquee Speed

You can speed up or slow down your marquees by using the scrollamount attribute along with a numeric value. Here, we use several values to set different marquees speed.

Source CodeResult
Hare Tortoise Snail

Scrolling Images

You can also make images scroll. To do this, simply add image code within the marquee tag instead of text. Here, we add an animated gif - one which suits the scrolling motion of the marquee.

Source CodeResult
Flying bat in a marquee

Images and Text

There's nothing to stop you putting more than one HTML element inside your HTML marquee codes. Doing so will make both scroll.

Source CodeResult
Flying bat in a marquee
Bruce the Bat

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:

widthSets the width of the marqueescrollamountHow far to jump as it moves
heightSets the height of the marqueeloopHow many times it should loop
directionSets the direction of the marqueebgcolorSets the background color of the marquee
behaviorWhether to slide, bounce, or scrollhspaceSets the amount of horizontal space around the marquee
scrolldelayHow long the marquee should wait before each jumpvspaceSets the amount of vertical space around the marquee