HTML Marquee Speed: scrollamount and scrolldelay

Legacy HTML <marquee> controlled movement speed mainly with scrollamount and scrolldelay. scrollamount sets how many pixels the content moves at each step, while scrolldelay sets the delay between those steps in milliseconds.

The <marquee> element is obsolete and should not be used for new websites. The legacy examples below are retained for understanding older pages; use CSS animation for new scrolling effects.

Legacy quick example:

<marquee scrollamount="20" scrolldelay="90">
  plus2net.com
</marquee>

In legacy marquee behavior, increasing scrollamount generally makes movement faster because the content travels farther per step. Increasing scrolldelay generally makes it slower because the browser waits longer between steps.

scrolldelay: Time Between Movement Steps Top ↑

The legacy scrolldelay attribute specifies the interval between movement steps in milliseconds. Its default value is 85 ms.

A smaller delay means movement steps happen more frequently; a larger delay means the marquee pauses longer between steps.

Legacy example with 90 ms delay:

<marquee style="background:#000080; color:#fff" scrolldelay="90">
  This is an example of Marquee (Delay: 90 milliseconds)
</marquee>

Legacy example with 500 ms delay:

<marquee style="background:#000080; color:#fff" scrolldelay="500">
  This is an example of Marquee (Delay: 500 milliseconds)
</marquee>

The 500 ms example waits much longer between movement steps, so it appears noticeably slower and more jerky.

Values Below 60 ms and truespeed Top ↑

Legacy marquee behavior has an unusual rule: without the boolean truespeed attribute, a scrolldelay value below 60 ms is treated as 60 ms. When truespeed is present, values below 60 ms are not forced up to that minimum.

<!-- Legacy only: do not use marquee for new projects -->
<marquee scrolldelay="30" truespeed>
  Legacy fast marquee
</marquee>

This is useful for understanding old source code, but it is not a reason to choose marquee for a modern animation.

scrollamount: Distance Moved Per Step Top ↑

The legacy scrollamount attribute specifies the distance moved at each interval in CSS pixels. Its default value is 6.

Legacy example with 5 pixels per step:

<marquee style="background:#000080; color:#fff" scrollamount="5">
  This is an example of Marquee (Amount: 5 pixels)
</marquee>

Legacy example with 20 pixels per step:

<marquee style="background:#000080; color:#fff" scrollamount="20">
  This is an example of Marquee (Amount: 20 pixels)
</marquee>

The 20-pixel version travels farther on every movement step, so it generally appears faster than the 5-pixel version when the delay is the same.

How scrollamount and scrolldelay Work Together Top ↑

Marquee speed is not controlled by one attribute alone. The visual rate depends on both the distance moved per step and how often those steps occur.

• Larger scrollamount: farther movement per step, usually faster.
• Smaller scrollamount: shorter movement per step, usually slower.
• Larger scrolldelay: more time between steps, usually slower.
• Smaller scrolldelay: less time between steps, usually faster, subject to the legacy 60 ms rule described above.

For legacy code, an approximate conceptual rate is scrollamount / scrolldelay. Actual visual smoothness still depends on browser rendering, so do not treat marquee values as a precision animation system.

Modern CSS Speed Control Top ↑

For new pages, use a normal HTML element and control movement with CSS. animation-duration gives a much clearer way to express how long one animation cycle should take.

<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 12s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
</style>

To make this CSS animation faster, use a shorter duration such as 6s. To make it slower, use a longer duration such as 20s. This is easier to reason about than combining legacy movement-step attributes.

Accessibility and Reduced Motion Top ↑

Automatically moving text can reduce readability and may cause discomfort for users who are sensitive to motion. Avoid movement when a static presentation works just as well, especially for important instructions or alerts.

For non-essential CSS animation, respect the user's reduced-motion preference:

@media (prefers-reduced-motion: reduce) {
  .ticker span {
    animation: none;
    padding-left: 0;
  }
}

Important information should remain understandable when the animation is stopped.

Common Marquee Speed Mistakes Top ↑

Using marquee for a new animation Top ↑

<marquee> is obsolete. Use CSS animation for new interfaces.

Assuming scrolldelay alone is the speed Top ↑

The apparent speed also depends on scrollamount, because that determines the movement distance at each interval.

Assuming every scrolldelay value is used literally Top ↑

Legacy values below 60 ms are treated as 60 ms unless truespeed is present.

Using bgcolor and other presentational attributes in modern HTML Top ↑

Old marquee examples often combine movement with attributes such as bgcolor. Use CSS for presentation in modern HTML.

Making essential text move continuously Top ↑

Keep essential information easy to read without requiring users to follow animated text.

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: