On a long single-page site every section can look the same from a distance. Changing the background as the visitor moves down gives them a sense of progress.
The Container block can shift its background colour in response to the scroll position.
Before You Start
- Edition: Pro — the scroll colour change 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 page long enough to scroll. This effect cannot be judged on a short page.
Preview
Steps
- Select your Container and set its background type to the scroll colour option.
- Add the colours the section should move between.
- Choose whether the change is a smooth blend or a direct switch.
- Set the transition value that controls how quickly it responds.
- Publish and scroll the real page.
How It Behaves
The colours are handed to the page as data and the block’s script picks one based on how far the visitor has scrolled.
- 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 on a published page: the container rendered
tpgb-row-scrollbgwith the colour list indata-bgcolorsand the chosen mode indata-scrolling-effect. - Scroll position is the input, not time — nothing happens until the visitor moves, and it follows them back up as well as down.
- A short page shows nothing. There has to be enough scrolling for the positions to be meaningfully different.
- 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, neither the class nor the colour data is rendered.
- Text contrast has to survive every colour in the list, at every scroll position.
- It is easy to overdo. One section changing is a nice touch; the whole page changing continuously is disorienting.
- It runs on scroll, which means work on every scroll event — noticeable on older phones if the page is already heavy.
- For movement that is not tied to scrolling, use the animated colour background instead.
Troubleshooting
The colour never changes
Three things: the scroll colour background type must be selected, Nexter Blocks Pro must be active, and the page must be long enough to scroll. Measured, the effect renders nothing if the background type is not chosen.
It jumps rather than blends
That is the direct switch mode. Choose the smooth option, and raise the transition value if it still feels abrupt.
My text becomes unreadable somewhere in the middle
One of the colours is too close to the text colour. Change it, or give the text its own background panel.
It is slow on mobile
The effect runs on every scroll event. Reduce the number of colours, or use it on one section only.
