Are you looking to add an image scroll animation effect to a WordPress container background? The Modern Image Effect option in the Nexter Blocks Container block lets you add multiple images to a section that move and animate as visitors scroll the page, creating a dynamic and layered visual experience.
With the Container block from Nexter Blocks, you can add an image scroll animation effect to any section in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Best Used For:
- Agency and portfolio sites with hero sections that animate on scroll to grab attention
- SaaS landing pages where background image layers shift as visitors scroll through feature sections
- Event or product launch pages that use parallax-style image movement to add visual depth
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated.
Add the Container block with the appropriate layout to the page and follow the steps:
1. Go to Style → Background Middle Layer.
2. Select Modern Image Effect from the Select Background Option dropdown.
3. In the Image List section, you will find two items by default.
4. Open one item. In the Select Image section, add your image.
Adjust the image position using the Left (Auto %), Right (Auto %), Top (Auto %), and Bottom (Auto %) controls. Each control is available for desktop, tablet, and mobile separately.
Set the image width from the Width section, with separate controls for desktop, tablet, and mobile.
From the Opacity field, adjust the image transparency level.
To add a hover-move effect, set a value in the Effect Intensity field. A higher value reduces the intensity. A negative value moves the image in the cursor direction. A positive value moves it in the opposite direction.
From the Effects dropdown, apply a visual effect to the image.
5. Enable the Magic Scroll toggle.
This opens the magic scroll options available with Nexter Blocks. Set the scrolling settings to match your requirements.
From the Responsive Visibility toggle, hide the image on specific device sizes.
In the Z-index field, set a value to layer the image over other page elements.
Repeat the process to configure the second item.
Click the + Add Item button to add more images to the section.
The section now shows the image scroll animation effect as visitors scroll the page.
