webdevpuneet.com

Related Snippets

60 in Heroes category
21–26 of 60

Hero with Announcement Ticker Bar

Hero with Feature Tabs Preview

Waitlist Hero with Live Position Counter

Search-Engine-Style Hero

Hero with Floating Glassmorphic Cards

App Hero with Phone Mockup and Store Badges

Hero with Announcement Ticker Bar — Free HTML CSS Snippet

Hero with Announcement Ticker Bar · Heroes · Plain HTML & CSS · Live preview

CategoryHeroes
TagsCSS AnimationCSS OnlyLanding Page

Copy & paste

Source Code

<section class="atk-hero">
  <div class="atk-ticker" aria-label="Announcements">
    <div class="atk-track">
      <span class="atk-item">🚀 v4.0 just shipped — real-time collaboration is here</span>
      <span class="atk-dot">•</span>
      <span class="atk-item">💸 Annual plans are 20% off through Friday</span>
      <span class="atk-dot">•</span>
      <span class="atk-item">📅 Join our live product walkthrough every Tuesday at 11am ET</span>
      <span class="atk-dot">•</span>
      <span class="atk-item">🚀 v4.0 just shipped — real-time collaboration is here</span>
      <span class="atk-dot">•</span>
      <span class="atk-item">💸 Annual plans are 20% off through Friday</span>
      <span class="atk-dot">•</span>
      <span class="atk-item">📅 Join our live product walkthrough every Tuesday at 11am ET</span>
      <span class="atk-dot">•</span>
    </div>
  </div>

  <div class="atk-inner">
    <span class="atk-badge">New: workspace automations</span>
    <h1 class="atk-title">Run your team on <span>one shared brain.</span></h1>
    <p class="atk-sub">Docs, tasks, and chat in a single workspace — so nothing important gets lost in five different tabs.</p>
    <div class="atk-cta-row">
      <a href="#" class="atk-btn-primary">Start for free</a>
      <a href="#" class="atk-btn-secondary">Watch demo</a>
    </div>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Seamless CSS marquee
Duplicated content plus a translateX(-50%) keyframe hides the loop point entirely.
Real pause on hover
animation-play-state: paused freezes and resumes from the exact position.
Zero JavaScript
The entire ticker runs on two CSS rules — no library, no interval.
Visually separated bar
A distinct background and border keep the ticker from competing with the headline.
No mid-scroll wrapping
white-space: nowrap keeps each announcement intact as it scrolls.
Standard hero below
Badge, headline, subheading, and dual CTAs beneath the ticker.
Adjustable speed
A single duration value controls scroll speed for all announcements.
Responsive headline
Font size scales down under 640px while the ticker keeps scrolling.

About this UI Snippet

Hero with Announcement Ticker Bar — A CSS Marquee That Pauses on Hover

Screenshot of the Hero with Announcement Ticker Bar snippet rendered live

A single hero badge can only announce one thing at a time. This snippet adds a slim, continuously scrolling ticker bar above the main hero content — cycling through several short announcements (a release, a promotion, a recurring event) in the space a badge would normally take, built entirely in CSS with no JavaScript and no library.

A real CSS marquee, not a static row

.atk-track holds every announcement twice back to back, then a single translateX(-50%) keyframe animation shifts the whole track left by exactly half its total width over 26 seconds, linearly and infinitely. Because the content is duplicated, the moment the first copy has scrolled fully out of view, the second copy is in exactly the position the first started in — so the loop point is invisible and the scroll reads as endless rather than visibly resetting.

Pausing on hover is one line of CSS

.atk-ticker:hover .atk-track { animation-play-state: paused; } freezes the scroll the instant a visitor's cursor enters the bar, so they can actually read whichever announcement happens to be passing through — a real, functional pause, not a cosmetic hover style. Moving the cursor away resumes the animation from exactly where it paused, since animation-play-state preserves position rather than restarting.

Why duplicate the content instead of using animation-iteration-count

A naive marquee scrolls one copy of the content across and then jumps back to the start, producing a visible snap at the loop point. Duplicating the announcement list and animating exactly halfway through the doubled track means there's always more ticker content entering from the right before the visible content fully exits left — the seam is where the two copies meet, and since they're identical, it's imperceptible.

A slim, separate bar above the hero

The ticker sits in its own full-width strip with a distinct darker background and a bottom border, visually separated from the main hero content below it — so it reads as a persistent status bar rather than competing with the headline for attention. white-space: nowrap on each item keeps individual announcements from wrapping mid-sentence as they scroll.

Customizing it

Replace the three announcements (and their duplicated copies — keep both sets identical) with your own. Adjust the 26s duration to speed up or slow down the scroll — longer text needs a longer duration to stay readable at the same apparent speed. Swap the cyan accent for your brand color, and link individual .atk-item spans to relevant pages if you want the ticker to be clickable.

Step by step

How to Use

  1. 1
    Paste the HTML and CSSA slim ticker bar renders above the hero, continuously scrolling three announcements.
  2. 2
    Hover over the tickerThe scroll pauses immediately so you can read the current announcement.
  3. 3
    Move the cursor awayThe scroll resumes from exactly where it paused, not from the start.
  4. 4
    Replace the announcementsEdit both duplicated sets of .atk-item spans identically — the loop depends on the duplication.
  5. 5
    Adjust the scroll speedChange the 26s duration in the atkScroll animation — longer text needs more time.
  6. 6
    Retheme the heroSwap the cyan accent and dark background for your brand's palette.

Real-world uses

Common Use Cases

Product launch and release pages
Rotate release notes and promotions in a slim bar above the hero, using duplicated content and a translateX(-50%) keyframe to hide the loop seam.
SaaS marketing homepages
Pair with a full announcement bar used site-wide on a SaaS homepage, with the ticker freezing on hover through animation-play-state.
E-commerce campaigns
Cycle shipping deadlines and sale reminders, with the whole effect needing two CSS rules and no JavaScript or intervals.
Event and conference landing pages
Scroll through schedule highlights and speaker news, with a distinct bar background keeping the ticker visually separate from the hero.
News and media homepages
Pair with a marquee elsewhere on news and media homepages for breaking updates, as a reference for seamless CSS-only scrolling.
Related: Bento Grid Showcase Hero
See the Bento Grid Showcase Hero for a related heroes pattern worth pairing with this one.
Related: Typed.js Multi-String Hero
See the Typed.js Multi-String Hero for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The track is animated exactly halfway across its total width (translateX(-50%)). Because the content is duplicated, by the time the first copy has scrolled fully out of view, the second identical copy is sitting exactly where the first one started — so the animation can loop (animation: ... infinite) without any visible jump or snap back to the start.

A single CSS rule, .atk-ticker:hover .atk-track { animation-play-state: paused; }, freezes the running keyframe animation the instant the cursor enters the ticker bar. Because animation-play-state preserves the animation's current position rather than resetting it, moving the cursor away resumes the scroll from exactly where it paused, not from the beginning.

Change the 26s duration on the animation: atkScroll 26s linear infinite; rule on .atk-track. A shorter duration scrolls faster; a longer one scrolls slower. If you add longer announcement text, increase the duration proportionally so the reading speed stays comfortable.

Yes — replace any .atk-item span with an <a> tag styled the same way (inherit the font-size, weight, and color, remove the default underline). The marquee animation applies to the parent .atk-track regardless of what element type the individual items are.

Since there's no JavaScript, this is a direct markup and CSS conversion. Click JSX, Vue, or Angular in the export panel. If your announcements come from a dynamic list, map over the array twice (rendering the full list two times in sequence) to preserve the duplication the seamless loop depends on.