OneTaskBy Tim King · Updated
Announcement Bar Generator
Dismissible Top Banner With Rotating Messages, HTML, CSS and Script
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 Announcement Bar works
An announcement bar is a slim strip across the top of a website for a sale, a new feature or a service notice. This announcement bar generator adds a link, an optional dismiss button that is remembered, and rotating messages when you enter more than one.
The bar sits in normal page flow above your header, so it pushes the page down rather than covering it, and nothing jumps when it is dismissed except the content moving up. On narrow screens the text aligns left so longer messages wrap neatly beside the close button.
How the announcement bar remembers a dismissal
When the visitor closes the bar, the script saves a key in localStorage built from the message
text. The bar stays hidden on later pages and visits, but as soon as you change the message the key
changes too, so the new announcement shows again to everyone.
Rotating messages
With two or more messages, the text fades from one to the next at the interval you choose. Rotation pauses while the pointer is over the bar or it has keyboard focus, so nobody loses a message they are reading, and it is switched off for visitors who ask for reduced motion. The message area is a polite live region, so screen readers read the new text without interrupting.
FAQ
Should the announcement bar stick to the top when scrolling?
Usually not. A sticky bar permanently takes space on small screens, and visitors have already seen it
by the time they scroll. If you do want it sticky, add position: sticky; top: 0; z-index: 10 to
.announce and keep the message short.
How many messages should rotate?
Two or three at most. Each message is only on screen for a few seconds, and most visitors glance at the bar once, so the first message should be the one that matters most. Put the rest on a page the link leads to.
Can I bring back a bar someone dismissed?
Change the message text and it shows again, because the saved key is based on the text. To reset it for testing, clear the site data in your browser or remove the key starting with "dismissed-" from local storage in the developer tools.
What colours work best for an announcement bar?
Use a colour that stands out from your header but still matches your brand, and check that the text has at least a 4.5 to 1 contrast ratio with the background. White text on a dark brand colour is the most common and readable choice.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Cookie Banner
Build a lightweight cookie consent banner with Accept and Reject buttons.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Mobile Menu
Build a responsive hamburger menu with an animated icon and panel.
Breadcrumb Generator
Build accessible breadcrumb navigation with optional BreadcrumbList schema.