More Navigation Snippets
Front-End Coding Playgrounds
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewAnnouncement Bar — Free HTML CSS JS Rotating Banner Snippet
Announcement Bar · Navigation · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Announcement Bar — Rotating Sticky Banner With Controls
The announcement bar is the slim banner pinned to the top of a site that cycles through short messages — a launch, a promo code, an event — auto-advancing on a slide, with manual controls and a dismiss button. This snippet builds it with plain HTML, CSS, and vanilla JavaScript, including the details that make it usable rather than annoying.
A sliding message track
The messages are list items in a flex track, each flex: 0 0 100% so exactly one fills the viewport. Advancing translates the track by -idx * 100% with a cubic-bezier transition, sliding the next message in from the right. This is the same horizontal-carousel mechanic used for sliders, here applied to a single-line bar. Messages can contain links and bold text (a promo code, a "read more"), since they are rendered as HTML from the data array.
Auto-rotation that respects the reader
A setInterval advances the bar every 5 seconds, but it pauses on pointerenter and resumes on pointerleave — so a visitor can stop on a message to read it or click its link without it sliding away. Every manual navigation also restarts the timer (restart()), so the next auto-advance is a full interval after your interaction rather than firing immediately. These two behaviors are what separate a respectful announcement bar from a frustrating one.
Manual controls and looping
Previous and next buttons let users step through messages, and the go(n) function wraps the index with modulo arithmetic so next from the last message loops to the first and previous from the first loops to the last. The controls and the auto-rotation share the same go(), so they stay in sync.
Dismissable, and it stays dismissed-feeling
A close button collapses the bar: it adds a .closing class that transitions height, padding, and opacity to zero, then removes the element on transitionend. Collapsing the height (rather than just hiding) means the page content slides up to reclaim the space smoothly. In production you would set a cookie or localStorage flag here so it does not reappear on the next visit.
A living gradient
The bar background is a three-color gradient sized at 200% and slowly shifted via the abShift keyframe, so the banner subtly flows between colors — eye-catching without being loud. It is pure CSS and costs nothing.
Sticky and layered
The bar is position: sticky; top: 0 with a high z-index, so it stays pinned above the page as you scroll and over other content. The demo page below shows it holding its place at the top.
Customizing it
Edit the MSGS array (with links and emphasis), change the rotation interval, recolor or retime the gradient, swap the slide for a fade, or persist dismissal. Pair it with a sticky promo bar variant or a floating pill nav below it.
Build with AI
Build, Understand, Optimize, and Extend It With AI
You don't have to trace the rotation and pause logic by reading it top to bottom yourself. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why restart() is called from both the manual nav buttons and the hover handlers, or how the go(n) modulo wrap keeps prev/next looping cleanly at the array boundaries. The same assistant can help optimize it — asking whether the setInterval-driven rotation could leak if the bar is removed mid-transition, or how to avoid layout thrash from the closing class transitioning height, padding, and opacity together. It's just as good for extending the bar: ask it to persist dismissal to localStorage so it stays closed on return visits, add swipe support for touch devices, or drive the MSGS array from a CMS feed instead of a hardcoded list. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a rotating "announcement bar" in plain HTML, CSS, and JavaScript using only a flex track and CSS transitions — no carousel library.
Requirements:
- A sticky bar pinned to the top of the page (position: sticky, top: 0) containing prev/next buttons, a viewport that clips its contents, and a close button.
- Messages come from a JavaScript array and can contain inline HTML (links, bold text), rendered into list items each sized flex: 0 0 100% inside a flex track.
- Advancing to a message must translate the track by negative index times 100% with a cubic-bezier transition, and the index must wrap with modulo arithmetic in both directions so next from the last message loops to the first and previous from the first loops to the last.
- Auto-rotate on a fixed interval (e.g. every 5 seconds), but the interval must be cleared on pointerenter and restarted on pointerleave, so hovering the bar always stops the rotation.
- Every manual prev/next click must also restart the interval timer, so the next auto-advance is a full interval after the last interaction rather than firing immediately.
- The close button must add a class that transitions height, padding, and opacity down to zero, then remove the element from the DOM only after the transition finishes (listen for transitionend), so the page content reflows smoothly instead of jumping.
- Give the bar a slowly shifting gradient background using a CSS keyframe animation on background-position, independent of the message rotation logic.Step by step
How to Use
- 1Paste HTML, CSS, and JSA gradient announcement bar pins to the top.
- 2Watch it rotateMessages slide in and out every few seconds.
- 3Use prev/nextStep through messages manually; they loop.
- 4Hover to readRotation pauses so you can read or click a link.
- 5Dismiss itThe close button collapses the bar away.
- 6Edit the messagesChange the MSGS array with links and emphasis.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The messages are flex items each sized to 100% of the viewport, and advancing translates the track by negative index times 100% with a cubic-bezier transition, sliding the next message in. It is the same horizontal-carousel mechanic as a slider, applied to a single-line bar, and go() wraps the index with modulo so it loops past the ends.
The auto-rotation pauses on pointerenter and resumes on pointerleave, so hovering stops the bar to let you read a message or click its link. Every manual navigation also restarts the timer, so the next auto-advance is a full interval after your interaction rather than firing right away.
The close button adds a closing class that transitions the height, padding, and opacity to zero, then removes the element on transitionend. Collapsing the height lets the page content slide up to reclaim the space smoothly. In production you would also set a cookie or localStorage flag so it stays dismissed on the next visit.
Yes. Messages are rendered as HTML from the MSGS array, so they can include anchors and bold text — a promo code, a read-more link, a save-a-seat call to action. Because hovering pauses rotation, users have time to actually click those links before the bar advances.
Render the messages from data and keep the active index in state, advancing it on an interval set up in a mount effect with cleanup, and pausing it via hover handlers. Drive the track transform from the index. For dismissal, toggle a state flag and persist it to storage. In Tailwind, build the track with flex and translate utilities and animate the gradient with a keyframe in the config.