Do you want to add a parallax effect to a container in WordPress? The parallax effect creates an illusion of depth and immersion by moving background and foreground elements at different speeds. Adding this effect to a container in WordPress can enhance the overall look and feel of a website, making it more engaging and dynamic for visitors.
With the Container block from the Nexter Blocks, you can easily add a parallax effect to a section in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
Add the Container block to the page and follow the steps –
1. After setting the appropriate container width select Min Height from the Height dropdown and set a min-height.
You can also use the Default height if you have enough content in the section.
Note: The parallax effect will not work with the Fit To Screen height option.
2. Then go to Style > Background Deep Layer.
3. Select Creative Image from the Select Background Option dropdown.
4. Then add our image from the Background Image section and do the necessary background image settings.
5. After that select Normal Background Image from the Background Effect dropdown.
Note: The Auto Moving Background Image option will automatically move the background image based on your settings. You can’t use the parallax effect with this option.
From the Special Image Hover Effects dropdown, you can add different parallax effects on mouse hover. Here you’ll find two options –
- Parallax Tilt Effect – To add a parallax tilt effect on mouse hover.
- Parallax Move Effect – To add a parallax move effect on mouse hover.
6. Finally enable the Scroll Parallax toggle.
Now you’ll see a parallax background effect as you scroll.
