Staaarter Tools

Scrolling Text Generator

Generates a small, self-contained HTML+CSS snippet, a div with an inline stylesheet driven by a CSS @keyframes animation, that scrolls your text horizontally across its container, a modern replacement for the deprecated <marquee> tag. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-23
generatorhtml

Overview

Introduction

The classic scrolling marquee effect is still a fun, retro way to draw attention to a banner or ticker, but the HTML tag that used to produce it is deprecated and shouldn't be used in new markup.

It runs entirely client-side, so nothing you paste is ever uploaded to a server.

What Is Scrolling Text Generator?

A generator that produces a small, self-contained HTML+CSS snippet, a div with an inline style block driven by a CSS @keyframes animation, that scrolls your text horizontally across its container.

It runs entirely client-side as part of this site's String Tools collection, so nothing you paste is ever uploaded to a server.

How Scrolling Text Generator Works

Your text is HTML-escaped and wrapped in a span inside a container div; a @keyframes rule animates the span's `transform: translateX()` from one edge of the container to the other over the chosen duration.

The chosen direction flips which edge the animation starts and ends at, and the chosen speed sets the animation's duration in seconds.

When To Use Scrolling Text Generator

Use it to quickly generate a retro-style scrolling banner, ticker, or announcement strip for a page, email, or prototype without hand-writing the keyframes yourself.

It's a fast way to get the answer without opening a code editor, a REPL, or writing a one-off script just to check.

Often used alongside String Repeater and String Length Counter.

Features

Advantages

  • Uses standards-based CSS animation instead of the deprecated <marquee> tag.
  • Speed and direction are both configurable, and the input text is HTML-escaped for safe embedding.

Limitations

  • Produces a simple linear scroll only; it doesn't support bouncing, pausing on hover, or vertical scrolling.
  • The generated snippet relies on CSS animations, which some users may have disabled via a reduced-motion preference.

Examples

Generating a left-scrolling banner

Input

Big sale this weekend only!

Output

<div class="scrolling-text-container" style="overflow: hidden; white-space: nowrap; width: 100%;">
  <style>
    @keyframes scroll-text {
      from { transform: translateX(100%); }
      to { transform: translateX(-100%); }
    }
    .scrolling-text {
      display: inline-block;
      animation: scroll-text 10s linear infinite;
    }
  </style>
  <span class="scrolling-text">Big sale this weekend only!</span>
</div>

With direction 'left' and speed 10 seconds, the text animates from off-screen right (100%) to off-screen left (-100%), repeating indefinitely.

Best Practices & Notes

Best Practices

  • Consider wrapping the animation in a `prefers-reduced-motion` media query before shipping the snippet to production, for visitors who've requested reduced motion.

Developer Notes

HTML-escaping covers `&`, `<`, `>`, `"`, and `'` via chained `replace()` calls before the text is interpolated into the snippet; direction is implemented by swapping the `from`/`to` `translateX()` percentages between `100%`/`-100%` rather than reversing the animation-direction property.

Scrolling Text Generator Use Cases

  • Generating a retro-style scrolling announcement banner
  • Prototyping a ticker-style UI element quickly
  • Producing a self-contained scrolling snippet for an email template

Common Mistakes

  • Pasting the snippet's <style> block inside an element that strips <style> tags, such as some rich text editors or sanitized HTML contexts.
  • Expecting vertical or bouncing scroll behavior; this tool only produces a linear horizontal scroll.

Tips

  • Lower the speed value for a faster scroll, and raise it for a slower, more leisurely pace.

References

Frequently Asked Questions