Parallax backgrounds for WordPress
Scroll this page and the background image moves slower than the text. This is the scroll effect of the AWB block at speed 0.8.
What a parallax background is
A parallax background moves at a different speed from the content in front of it, which creates a sense of depth.
On a web page the effect is made by moving the background image while the page scrolls. AWB uses the Jarallax library for this. The movement is a CSS transform, so it does not affect the layout of the content.
There are six effects and each has a speed setting. Parallax is disabled on phones by default and can be enabled per block.
Effects
- ScrollThe background moves vertically at a different speed from the page. Speed is between -1.0 and 2.0. At 0 the background does not move.
- ScaleThe background is scaled up or down while the section scrolls through the viewport.
- OpacityThe background fades in while the section scrolls into view.
- Opacity and scrollOpacity combined with scroll. The same combination exists for scale.
- Mouse parallaxThe background follows the mouse cursor. On phones it follows the tilt of the device.
- DisabledNo effect. The background stays in place.
Mouse parallax
Move the cursor over this section and the background moves with it. On a phone it responds to the tilt of the device.
The Size setting controls how far the image moves. The Speed setting controls how quickly it follows the cursor.
How to add a parallax background
- Install the pluginInstall Advanced WordPress Backgrounds from the WordPress plugin directory and activate it.
- Add the blockAdd the Advanced WordPress Backgrounds block to the page and place your content inside it.
- Choose the imageIn the block sidebar select Image and choose a picture from the media library.
- Set the effectIn the Parallax section choose an effect and a speed. Add an overlay colour if the text needs more contrast.
Every field is described in the parallax documentation.
Questions
What is a parallax background?
A background image that moves at a different speed from the content in front of it. The first section of this page uses the scroll effect and the section above uses mouse parallax.
Does parallax hurt page speed?
The movement is a CSS transform and has almost no cost. The size of the background image matters more, so use WebP and keep it under a few hundred kilobytes.
Does it work on mobile?
Yes. It is disabled on phones by default and each block has a checkbox to enable it.
Does it work on video backgrounds too?
Yes. Parallax is a setting that applies to both image and video backgrounds.
Does it need a page builder?
No. AWB works in the WordPress block editor. There is also a shortcode for the classic editor and extra row settings for WPBakery Page Builder.
How much does it cost?
The plugin is free. It is published in the WordPress plugin directory under the GPL, and the source code is on GitHub.
Install the plugin
AWB is free and published in the WordPress plugin directory.