OneTaskBy Tim King · Updated
Vertical Ticker
Rotating Headlines That Slide Up in 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 Vertical Ticker works
A vertical ticker shows one short headline at a time and slides the next one up into place after a pause, so updates rotate in a single line. Enter your headlines and timing, and copy the HTML, CSS and a tiny pause script.
Vertical tickers are popular for announcement bars, shop promotions, release notes and status messages. Unlike a sideways ticker, each headline stays still long enough to read in full before it moves.
How the vertical ticker rotates
The headlines sit in a list inside a window exactly one line tall. A generated keyframe animation holds each headline in view for most of its share of the loop, then slides the list up by one line height. The first headline is repeated at the end of the list, so the final slide lands on an identical line and the loop restarts with no visible jump. No JavaScript drives the movement.
Pausing and accessibility
The rotation pauses on hover, while a link has keyboard focus, and with the Pause button, which meets the WCAG rule that moving content must be pausable. The repeated first headline is hidden from screen readers and the Tab key. With reduced motion turned on, the animation stops and every headline is listed normally instead.
FAQ
How do I add more headlines?
Add a list item before the last one and regenerate the keyframes, because each headline needs its own hold step. The easiest way is to paste the new list into this tool and copy the updated CSS.
Why do long headlines get cut off?
Each line is one row tall, so text that is wider than the ticker is trimmed with an ellipsis. Keep headlines short, around 60 characters, or use the horizontal news ticker for longer lines.
How do I change how long each headline stays?
The animation duration is the seconds per headline multiplied by the number of headlines. Change
the seconds here and copy again, or scale the duration on .vticker-list by hand, since the
keyframe percentages stay the same.
Is this better than a carousel for announcements?
For one line of text, yes. It takes very little space, needs no arrows or dots, and does not shift the page layout. Use a carousel only when each slide has images or longer content.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
News Ticker
Build a scrolling breaking news headline bar with a pause button.
Announcement Bar
Build a dismissible top-of-page announcement bar with rotating messages.
CSS Marquee Generator
Build an infinite scrolling headline marquee in pure CSS.
Text Animation
Animate a headline letter by letter and copy the CSS.
Sticky Header
Build a sticky header that hides, shrinks or stays as the page scrolls.