A still hero image is inert. A very slow zoom across it gives the section a sense of life without asking the visitor to watch anything.
The Ken Burns effect does exactly that — named after the documentary technique of drifting slowly across a photograph.
Before You Start
- Edition: Pro — the Ken Burns effect needs Nexter Blocks Pro.
- Block to enable: Container, switched on under Nexter > Blocks in your WordPress dashboard.
- A Container block with an image background — see the Container block guide.
- An image with room to spare, since the effect zooms into it.
Steps
- Select your Container and set its background type to image.
- Choose your background image.
- Switch the Ken Burns effect on.
- Choose the direction — zooming in or out.
- Set the duration. Slower is better; this should be barely noticeable.
- Publish and watch the real page.
How It Behaves
The effect is a CSS animation applied to the background layer, so it runs continuously on its own.
- 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: the Ken Burns toggle on its own, with no background type chosen, rendered the bare container.
- With an image background set, measured: the container rendered an inline
animation: bg-kenburns-effect …rule on its background layer, carrying the duration and direction as set. - It loops forever. There is no start or end — the animation repeats for as long as the section is on screen.
- The image is scaled up to zoom, so a small image will soften noticeably. Use one larger than the space it fills.
- 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, no animation is rendered and the background sits still.
- Fast is wrong. A short duration turns a subtle drift into a distraction; twenty seconds and upwards reads as intentional.
- Edges get cropped as it zooms, so keep the subject away from them.
- It runs the whole time the section is visible, which is constant work for the browser — one such section per page is sensible.
- Consider motion sensitivity. Continuous movement behind text is uncomfortable for some readers.
Troubleshooting
Nothing happens
Check an image background is set first — measured, the effect toggle alone renders nothing. Then check Nexter Blocks Pro is active.
The image looks blurry
It is being scaled up. Use a larger source image so it stays sharp at full zoom.
The movement is too obvious
Increase the duration. A background effect that draws attention to itself is working against the content.
Part of my image is cut off
That is how the zoom works. Choose an image whose subject sits well inside the frame.
