A page of stacked sections can read as one flat sheet. Giving a background its own scrolling speed separates it from the content and marks where one section ends.
Parallax does that: the background moves more slowly than the text in front of it.
Before You Start
- Edition: Pro — the parallax effect needs Nexter Blocks Pro.
- Block to enable: Container, switched on under Nexter > Blocks in your WordPress dashboard.
- A Container block with content inside — see the Container block guide.
- A background image large enough to stay sharp while it moves.
Steps
- Select your Container and set its background type to image.
- Choose your background image.
- Switch parallax on.
- Give the container enough height for the movement to be visible — a short section has nothing to scroll through.
- Publish and scroll the real page.
How It Behaves
Parallax is part of the background layer, so it only exists once an image background is chosen.
- The background option comes first. Measured: the individual effect settings do nothing on their own — the container only renders an effect once the background type that owns it is chosen. Measured: switching parallax on with no background type set rendered the bare container, byte-identical to one with the setting untouched.
- With an image background set, measured: the container rendered its
tpgb-deep-layerbackground layer, which is what the parallax script moves. - It needs room. The effect is the difference between two scroll speeds, so a section a few hundred pixels tall shows almost nothing.
- The image is cropped as it moves, so keep anything important away from the edges.
- Measured with Nexter Blocks Pro deactivated: this effect disappears completely and the container renders as a plain section, with nothing on the page to say why.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, the background layer is not rendered and the section is plain.
- It can feel rough on low-powered devices, because the background is repositioned as the page scrolls.
- Many mobile browsers handle fixed backgrounds poorly, so check on a real phone rather than a narrow desktop window.
- Used on every section it stops being an effect and becomes noise. One or two per page is plenty.
- Respect visitors who ask for less motion. Parallax is one of the effects that can make people feel unwell.
Troubleshooting
Nothing moves
Check an image background is actually set — measured, parallax on its own renders nothing. Then check Nexter Blocks Pro is active and that the section is tall enough to scroll through.
The movement is barely noticeable
The section is too short. Increase its height or padding so there is more scrolling for the effect to work across.
The image is cut off
That is expected — parallax works by moving a larger image behind a smaller window. Use an image whose subject sits near the centre.
It is jerky when scrolling
Usually the image is too large. Compress it and reduce its dimensions to something closer to the space it fills.
