A repeating pattern that drifts slowly sideways gives a section constant, quiet movement. It is the effect behind most animated banner strips.
The Container block can scroll its background image continuously, at a speed and direction you set.
Before You Start
- Edition: Pro — the auto scroll background 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 seamlessly tiling image. An image that does not tile will show a visible join on every pass.
Steps
- Select your Container and set its background type to image.
- Choose your tiling background image.
- Set the background effect to the animated option.
- Choose the direction it should travel.
- Set the speed, then publish and watch the real page.
How It Behaves
The direction and speed are written onto the container and the script scrolls the background accordingly.
- 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 with the direction set to left and speed 45: the container rendered
columns_animated_bg row-bg-leftwithdata-direction="left"anddata-trasition="45". - It runs on a timer, not on scroll. The movement continues whether or not the visitor is doing anything — unlike image scroll animation, which follows the scroll.
- The image repeats to fill the width, which is why tiling matters so much.
- 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 animated background class is absent and the image sits still.
- A non-tiling image looks broken. The seam travels across the section on every pass and is the first thing anyone notices.
- Fast is dizzying. This should read as drift, not as motion.
- It never stops, so it is constant work for the browser and constant movement for the reader.
- Text on top needs an overlay, because the contrast under it changes continuously.
Troubleshooting
The background does not move
Check an image background is set first and the animated effect is chosen — measured, the direction and speed alone render nothing. Then check Nexter Blocks Pro is active.
I can see a line crossing the section
The image does not tile seamlessly. Use one designed to repeat, or a pattern without obvious edges.
It is too fast
Lower the speed. For a background, slower is almost always better.
It moves the wrong way
Change the direction setting — measured, it is written onto the container as row-bg-left or its opposite.
