Marquee-like Infinite Scrolling Text in Vanilla JavaScript – text-roller

text-roller is a Vanilla JavaScript library that turns one inline text element into an infinite horizontal scroller.

It works like a modern replacement for the old <marquee> pattern in small UI areas.

Features

• Creates a looping horizontal text marquee.
• Clones the first child to fill wide containers.
• Moves text through requestAnimationFrame.
• Accepts a speed value through the constructor.
• Supports start and stop controls.
• Recalculates widths during each animation frame.
• Uses plain JavaScript and a small CSS requirement.

Use Cases

• Announcement bars can show shipping, sale, or status messages.
• News tickers can show short headlines in a compact row.
• Event pages can repeat sponsor names or session labels.
• Product pages can loop feature labels or trust text.
• Dashboards can show rotating notices above data panels.

How to use it:

1.  Wrap your text (e.g., breaking news) into the text roller.

<div id="text-roller">
  <span>1. This text is going to scroll infinitely - 2. This text is going to scroll infinitely - </span>
</div>

2. Apply your CSS styles to the text roller.

#text-roller{
  position: relative;
  background-color: #222;
  color: #fff;
  white-space: nowrap;
}

3. Load the text-roller library at the end of the document.

<script src="text-roller.js"></script>

4. Initialize the text roller.

var element = document.getElementById("text-roller");
var text_roller = new TextRoller(element);

5. Start/stop the text roller.

text_roller.start();
text_roller.stop();

Alternatives:

• Dynamic Marquee-like Text Scroller In Vanilla JavaScript
• Smooth, Infinite Scrolling Marquees in Vanilla JavaScript
• Responsive Text Scrolling Effect
• Smooth And Customizable Horizontal Scroller
• Create A Simple News Ticker using Pure CSS
• 10 Best Marquee-like Content Scrolling Plugins In JavaScript