Overview
Introduction
The old <marquee> HTML tag used to be the easy way to make scrolling text, but it was deprecated long ago and modern browsers no longer treat it as standard markup.
This tool generates a small, modern replacement snippet built from a <div>, an inline <style> block, and a CSS animation, so you can drop scrolling text into a page without relying on deprecated markup.
What Is Text Marquee Creator?
A generator that wraps your text in a self-contained HTML/CSS snippet implementing a scrolling marquee banner, with adjustable banner width and scroll speed.
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 Text Marquee Creator Works
The tool escapes your text for safe HTML embedding, then wraps it in a <span> inside a fixed-width <div>, with a scoped @keyframes animation that translates the span from 0% to -100% over the chosen number of seconds, on an infinite loop.
The transformation happens synchronously in JavaScript the moment you change the text, width, or speed, with no network round trip involved.
When To Use Text Marquee Creator
Use it when you want a quick scrolling announcement banner, a retro-styled ticker, or a stopgap scrolling effect for a prototype or internal tool.
It's a fast way to get working markup without hand-writing the CSS keyframe animation and duplicating boilerplate yourself.
Often used alongside String Repeater and Case Converter.
Features
Advantages
- Produces standards-based CSS instead of the deprecated <marquee> tag.
- Width and speed are both adjustable so you can match a specific layout.
- Escapes the text before embedding it, so quotes and angle brackets in your message cannot break out of the generated markup.
Limitations
- The generated animation scrolls continuously in one direction and doesn't support pausing on hover or alternating direction without editing the snippet by hand.
- Very long banner text combined with a fast speed can be hard to read; test the speed against your actual text length.
Examples
Best Practices & Notes
Best Practices
- Keep banner text short relative to the width, since very long text takes correspondingly longer to fully scroll across at a given speed.
- Test the snippet at the target site's actual font size, since the scroll distance is relative to the rendered text width.
- Wrap the animation in a prefers-reduced-motion media query before shipping, since continuous movement is a genuine accessibility problem for some readers.
Developer Notes
Text is HTML-escaped (&, <, >, ", ') before being embedded in the <span>, since the output is meant to be pasted directly into a live HTML document; the animation uses `padding-left: 100%` on the span combined with a `translateX(0)` to `translateX(-100%)` keyframe so the scroll distance naturally scales with the container width rather than being hardcoded in pixels.
Text Marquee Creator Use Cases
- Adding a scrolling announcement banner to a static site
- Building a retro-styled ticker for a personal page
- Prototyping a scrolling effect before hand-tuning the CSS
Common Mistakes
- Expecting the snippet to support pause-on-hover or bounce-back scrolling out of the box; those require manually extending the generated CSS.
- Setting the speed very low with long text, producing an uncomfortably fast scroll.
Tips
- Wrap the generated <div> in a container with `overflow: hidden` at the page level too if your layout needs an extra safety clip.
- Scrolling text is easy to miss entirely, so never put information there that a reader actually has to see.