Add parallax scrolling to WordPress

As the page scrolls, a section drifts gently upward while it passes through the screen. Or each thing inside it drifts at its own pace.

Get Grinner free

See it live

Type

A setting on Group and Columns

Find it

Section settings, Parallax

Phones

Drifts unless the section’s phone motion is off

Speed

Built on the browser’s own scroll animation

Live demo

A sky with depth.

This is the real Parallax setting, running on this page.

Parallax example, a scatter of small stars

Parallax example, a second scatter of stars in orange, lilac and cream

Settings Apply to Children Intensity 80 Vary children on

What you can change

The settings worth knowing.

Whole section or each piece, and how far they travel.

One piece

Apply to

Whole or in pieces

Container drifts the section as one, Children drifts each direct child on its own.

20

100

Intensity

How far it drifts

From 0 to 100. 30 is about 44px each way, and 100 gives 80px.

Vary children

Different speeds

Children drift at three rates in turn, with Spread setting how far apart those rates are.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Pick a section

A Group or Columns, ideally holding a few separate pieces.

3

Turn on Parallax

Choose Container or Children, set the intensity, then publish.

Good to know

Fair questions.

Parallax is a Grinner setting on Group and Columns. As the page scrolls, a section drifts gently while it passes through the screen, or each thing inside it drifts at its own pace. Use it to add a sense of depth to a hero, a picture band or a decorative section.

Yes. Turn on Keep still in that child’s own Parallax panel, and it holds its place while its neighbors drift.

A wrapper that clips its content, or a Gradient sweep or Image zoom hover on the section, freezes it.

Container drift does. Card stacking overrides parallax on the children.

It switches off, so nothing drifts.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

Studio-quality design
Built for speed
Pay once, no subscription

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All scroll and motion features