Hero sections
Ticker Band
A headline over a band of text that scrolls sideways and never stops.
R560
Once. Yours to keep
The shape of it, not a screenshot
What it is
A headline with a band underneath it that scrolls sideways and does not stop. Use it for the things you would otherwise set in a row: services, the towns you deliver to, the materials you stock, the names on the shelf.
It runs on duplicated content and a CSS transform, so the movement stays on the compositor and never touches layout. Speed is set in seconds per pass, direction goes either way, and hover-pause is a toggle. Text items and logo images sit in the same band, and there is a second band running the opposite way if you want the crossed pair. The duplicated run is hidden from screen readers so nothing gets read twice.
Good for a supplier, a distributor, or a studio with a long list of its own to show. It is wrong if that list has three items, because a marquee with three items reads as an empty shelf. It is also wrong if the items need to be read carefully rather than glanced at — anything moving gets skipped.
What you get
- Hero.astro with the headline block and one or two bands
- Marquee CSS built on transform only, no JavaScript needed
- Speed, direction and item gap as CSS variables
- Hover-pause toggle
- Text items and logo items shown in the same band
- aria-hidden on the duplicated run
After you buy
- 01 You message me On WhatsApp. Tell me which one and where it is going.
- 02 I set it up for you Your words, your colours, your logo dropped in — or the raw files if you would rather do it yourself.
- 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
- 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.
You might also want
- Hero sections R880 Quiet Loop Muted video behind the headline, with a poster frame that holds if the video never loads.
- Hero sections R740 Cover Plate One photograph across the whole screen under a scrim measured for readable text.
- Hero sections R650 Drift Field A canvas of drifting dots behind the text. About 4 KB of JavaScript, no image files.
Nothing to look at yet
This one is written up but not built, so there is no live version to show. Ask me and I will tell you honestly how long it would take.
Ask about it