Parallax band

A parallax scrolling website, built into your site with no plugin and no library. A full-width band whose background image scrolls slower than the page, with a tint and content on top. A scroll-driven transform, not background-attachment: fixed, so it works on iOS.

Copy scrolls with the page.
The hills behind it move at half the speed.

You'll need to give us

A wide photo for the band, if you have oneAt least 2000 pixels across. Text sits on top of it, so a calm area in the picture helps.

Send these with your request and we can start straight away. Everything else is ours to do.

Break up a long page with a wide photo that glides behind your words as visitors scroll.

Also called

parallax sectionparallax background rowElementor motion effectsBeaver Builder parallax rowscroll-speed backgroundparallax background

What it replaces

Elementor “Motion effects → Scrolling effects” on a section background
Beaver Builder row background “Parallax”
Divi “Use parallax effect”
`background-attachment: fixed` CSS parallax

Good for

A break between sections of a long page: a landscape, a workshop, a skyline behind one line of copy and a button.

Not for

Images that carry information (it is decorative, with empty alt text), portrait photos (the crop is wide), or more than two or three bands on one page.

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

prefers-reduced-motion (tracked live): the image is a static cover background and nothing moves with the scroll.
The image is decorative (empty alt); the slot content carries the meaning and sits above a tint for contrast.
Without JavaScript the image is a static background, so the band still looks finished.
Off screen the scroll handler does no work; on screen it does one transform per animation frame.

Where it's live

superherotech.ai: /elements/parallax-band/ (demo)

How to ask for it

“The parallax-band on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.

More in Hero & motion

See them all working

Scroll reveal
Let sections and cards arrive as visitors scroll to them, so a long page feels alive without anything getting in the way.
Animated text
Let your most important line arrive the way you would say it out loud, in your own type and at your own pace.
Animated background
The moving hero background people ask for — waves, cells, fog, birds — in one small file, no WebGL, and it holds still for anyone who asked for less motion.
Particle field
Give your hero quiet, constant movement, like a network coming alive, without the weight of a video.