HTML Marquee Behavior: scroll, slide and alternate

The legacy <marquee> element used the behavior attribute to control what happened when moving content reached an edge. Its three commonly used values were scroll, slide and alternate.

<marquee behavior="scroll">Scrolling text</marquee>
<marquee behavior="slide">Sliding text</marquee>
<marquee behavior="alternate">Alternating text</marquee>

scroll repeats the movement, slide moves toward an edge and stops, and alternate reverses direction at the edges. Browser support for <marquee> is legacy behavior and should not be the basis of a new interface.

Marquee behavior values Top ↑

The historical behavior attribute accepted these values:

• scroll: moves across the marquee area and starts again; this was the default behavior.
• slide: moves toward the destination edge and stops.
• alternate: reverses direction when it reaches an edge.

Scroll behavior Top ↑

behavior="scroll" continuously moves the content across the marquee area and then starts again. It was the default when the behavior attribute was omitted.

Legacy rendered example:

<marquee style="background:#000080; color:#fff" behavior="scroll">
  This is an Example Marquee (Behavior: Scroll)
</marquee>

The original bgcolor presentation attribute has been replaced with CSS in the example above. This does not make <marquee> modern; it only avoids teaching an additional obsolete presentation attribute.

Slide behavior Top ↑

behavior="slide" moves the content toward the destination edge and then stops instead of repeating continuously.

Legacy rendered example:

<marquee style="background:#000080; color:#fff" behavior="slide">
  This is an Example Marquee (Behavior: Slide)
</marquee>

Older tutorials sometimes described this as Internet Explorer-only behavior. That historical browser note is no longer useful guidance: the element itself is deprecated, so new pages should use CSS rather than depending on legacy marquee compatibility.

Alternate behavior Top ↑

behavior="alternate" makes the moving content reverse direction when it reaches an edge.

Legacy rendered example:

<marquee style="background:#000080; color:#fff" behavior="alternate">
  This is an Example Marquee (Behavior: Alternate)
</marquee>

Alternate behavior with vertical direction Top ↑

The historical direction attribute could be combined with behavior="alternate". This example moves vertically within an 80-pixel-high marquee area.

<marquee style="height:80px; background:#000080; color:#fff" direction="up" behavior="alternate">
  direction="up" behavior="alternate"
</marquee>

For new projects, create vertical or horizontal movement with CSS animation instead of the obsolete direction and behavior attributes.

Modern CSS alternative Top ↑

CSS animation provides more control and keeps presentation out of HTML. The example below creates a continuous horizontal ticker-like effect without <marquee>.

<div class="ticker">
  <span>Latest tutorial update</span>
</div>

<style>
.ticker {
  overflow: hidden;
  white-space: nowrap;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 8s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker span {
    animation: none;
    padding-left: 0;
  }
}
</style>

To imitate a one-time slide, use a single animation iteration and retain the final state with animation-fill-mode: forwards. To imitate alternate, CSS supports animation-direction: alternate.

.slide-once {
  animation: moveIn 3s linear 1 forwards;
}
.alternate-motion {
  animation: moveSide 3s linear infinite alternate;
}

Accessibility and reduced motion Top ↑

Automatically moving content can be distracting or uncomfortable for some users. For non-essential movement, provide a static experience when the user has enabled a reduced-motion preference. If moving content contains important information, make sure the same information remains available when animation is stopped.

Do not rely on motion alone to communicate meaning, and avoid making important text continually move when a static presentation would work just as well.

Common mistakes Top ↑

Using marquee in new production code Top ↑

The element is deprecated. Preserve it only when maintaining legacy content; use CSS animation for new work.

Combining several obsolete presentation attributes Top ↑

Attributes such as bgcolor, old alignment attributes and marquee-specific movement controls should not be presented as modern HTML styling techniques.

Assuming every browser will reproduce legacy behavior identically Top ↑

Deprecated behavior is not a good compatibility contract for new interfaces. Build the intended effect with supported CSS instead.

Ignoring reduced-motion preferences Top ↑

If motion is not essential, reduce or remove it with @media (prefers-reduced-motion: reduce).

Related marquee tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: