Announcement Bar — Free HTML CSS JS Rotating Banner Snippet

<div class="ab-bar" id="abBar" role="region" aria-label="Announcements">
  <button class="ab-nav ab-prev" id="abPrev" aria-label="Previous">‹</button>
  <div class="ab-viewport"><ul class="ab-track" id="abTrack"></ul></div>
  <button class="ab-nav ab-next" id="abNext" aria-label="Next">›</button>
  <button class="ab-close" id="abClose" aria-label="Dismiss">✕</button>
</div>
<div class="ab-page"><h1>Page content</h1><p>The rotating bar sits pinned at the top.</p></div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0c0c16;color:#fff}

.ab-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:6px;padding:0 10px;height:44px;background:linear-gradient(90deg,#4f46e5,#9333ea,#db2777);background-size:200% 100%;animation:abShift 12s ease infinite;overflow:hidden}
@keyframes abShift{0%,100%{background-position:0 0}50%{background-position:100% 0}}

.ab-viewport{flex:1;overflow:hidden;height:100%}
.ab-track{list-style:none;display:flex;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.ab-msg{flex:0 0 100%;display:flex;align-items:center;justify-content:center;gap:8px;height:100%;font-size:13.5px;font-weight:600;white-space:nowrap;padding:0 8px}
.ab-msg a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:2px}

.ab-nav,.ab-close{background:rgba(255,255,255,.14);border:none;color:#fff;width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:15px;line-height:1;flex-shrink:0;transition:background .2s}
.ab-nav:hover,.ab-close:hover{background:rgba(255,255,255,.28)}
.ab-close{margin-left:4px}
.ab-bar.closing{height:0;padding:0;opacity:0;transition:height .3s,opacity .3s,padding .3s}

.ab-page{padding:60px 24px}
.ab-page h1{font-size:32px;font-weight:800}
.ab-page p{color:#8b8ba3;margin-top:8px}

var MSGS = [
  '🚀 v2.0 is live — <a href="#">see what shipped</a>',
  '🎁 Use code <strong>SPRING30</strong> for 30% off annual plans',
  '🌍 New edge regions in Sydney & São Paulo — <a href="#">read more</a>',
  '📅 Join our launch webinar this Thursday — <a href="#">save a seat</a>'
];

var track = document.getElementById('abTrack');
var bar = document.getElementById('abBar');
MSGS.forEach(function (m) {
  var li = document.createElement('li');
  li.className = 'ab-msg';
  li.innerHTML = m;
  track.appendChild(li);
});

var idx = 0, timer = null;
function go(n) {
  idx = (n + MSGS.length) % MSGS.length;
  track.style.transform = 'translateX(' + (-idx * 100) + '%)';
  restart();
}
function restart() { clearInterval(timer); timer = setInterval(function () { go(idx + 1); }, 5000); }

document.getElementById('abNext').addEventListener('click', function () { go(idx + 1); });
document.getElementById('abPrev').addEventListener('click', function () { go(idx - 1); });
document.getElementById('abClose').addEventListener('click', function () {
  clearInterval(timer);
  bar.classList.add('closing');
  bar.addEventListener('transitionend', function () { bar.remove(); }, { once: true });
});

// Pause rotation on hover so messages can be read or clicked.
bar.addEventListener('pointerenter', function () { clearInterval(timer); });
bar.addEventListener('pointerleave', restart);
restart();