OneTaskBy Tim King · Updated
News Ticker Generator
Scrolling Headlines Bar in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the News Ticker works
A news ticker is a thin bar with a label such as Breaking that scrolls a line of headlines across the page in an endless loop. Type your headlines, set the speed and colours, and copy the HTML, CSS and a few lines of JavaScript.
Tickers suit news sites, live event pages, sports scores, status updates and trading dashboards, anywhere there is a stream of short updates that visitors can glance at without leaving the page.
How the news ticker loops
The headlines are listed twice in a track that is as wide as its content. A CSS animation slides the track left by half its width and starts again, and because the second half matches the first the restart is invisible. A soft mask fades the headlines in and out at the edges.
Pausing and accessibility
Accessibility guidelines say anything that moves for more than five seconds needs a way to pause
it, so the ticker has a real Pause button with aria-pressed. It also pauses on hover and while a
headline has keyboard focus, so links are easy to click. The duplicate headlines are hidden from
screen readers and skipped by the Tab key, and the reduced motion setting stops the scroll.
FAQ
How do I load headlines from a feed?
Build the list items from your data on the server or with JavaScript, then add the same items a
second time with aria-hidden="true" and tabindex="-1" on the links. The CSS needs no changes as
long as both copies match.
How do I change the ticker speed?
Change the animation duration on .ticker-track. The distance depends on how long your headlines
are, so more or longer headlines scroll faster at the same duration. Aim for a pace people can read
comfortably.
Why does the ticker need a pause button?
WCAG success criterion 2.2.2 requires a way to pause, stop or hide moving content that starts automatically and lasts over five seconds. Hover alone does not help keyboard or touch users, so a visible button is the reliable way to meet it.
Can the ticker stick to the top of the page?
Yes. Wrap it in your header or give .ticker position: sticky with top: 0 and a z-index.
Keep it short so it does not take up too much space on small phones.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Vertical Ticker
Build a ticker that rotates headlines one at a time, sliding up.
CSS Marquee Generator
Build an infinite scrolling headline marquee in pure CSS.
Announcement Bar
Build a dismissible top-of-page announcement bar with rotating messages.
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.
Sticky Header
Build a sticky header that hides, shrinks or stays as the page scrolls.