HTML: Marquee, Scrolling Text

By Xah Lee. Date: . Last updated: .

“Marquee element” is invented by Microsoft back around 1999. It is used to make text or images to automatically scroll. Typically, in a horizontal strip.

HTML Marquee

The BOSS IS ON A ROLL (behavior=scroll)
The BOSS IS ON A ROLL (behavior=slide)
The BOSS IS ON A ROLL (behavior=alternate)

Here's the code:

<marquee bgcolor="#ffff00" width="600" height="50">The BOSS IS ON A ROLL</marquee>

“marquee” element's attributes:

loop="-1"
a integer. Number of times to loop. “-1” means forever. Default value is “-1”
direction="left"
left, right, up, down. Default is left
behavior="scroll"
scroll, slide, alternate. Default is scroll
scrolldelay="85"
update interval for scroll movement, in milliseconds. Default is 85. Smaller than 60 is ignored, 60 is used instead, unless truespeed is specified.
truespeed
see: scrolldelay. This is not well supported.
scrollamount="6"
amount of scrolling update, in pixels.
hspace="30"
horizontal margin
vspace="10"
vertical margin
width="600"
width in CSS pixel. [see What's a CSS Pixel?]
height="40"
width in CSS pixel.
bgcolor
CSS color value. [see CSS Color Syntax]

The “marquee” element is supported by all browsers.

CSS3 Marquee

“marquee” is re-introduced in CSS3.

As of , major browsers do not support it.

Here's a example. (if you don't see it move, then your browser doesn't support it.)

The BOSS IS ON A ROLL
<div id="marquee99609">The BOSS IS ON A ROLL</div>
#marquee99609 {
background-color:yellow;
width:9em;
height:2em;
overflow: auto;
overflow-style: marquee-line;
marquee-style: scroll;
}

You can emulate marquee using CSS animation. [see CSS: Animation]

See also: CSS: OverFlow, Scrollbar

Reference

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog