Are you looking to add image scroll animation to a container in WordPress? Image scroll animation, where images move or change as the user scrolls through the page. This not only adds a touch of uniqueness to your design, but it also creates a dynamic and interactive user experience.
With the Container block from the Nexter Blocks, you can easily add an image scroll animation 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 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’ll find two items by default.
4. Open one item, in the Select Image section you have to add your image.
You can manage the image position from the Left (Auto %), Right (Auto %), Top (Auto %) and Bottom (Auto %) toggle for desktop, tablet and mobile separately.
You can also manage the image width from the Width section for desktop, tablet and mobile separately.
From the Opacity field, you can manage the image opacity.
You can add a move effect to the image once you hover over the container by setting a value in the Effect Intensity field. The higher the value lower the intensity. A negative value will move the image in the cursor direction while a positive value will move it in the opposite direction.
You can add different effects to the image from the Effects dropdown.
5. Then enable the Magic Scroll toggle.
Now you’ll see the same magic scroll options available with the Nexter Blocks.
Set the scrolling settings as per your requirements.
From the Responsive Visibility toggle, you can hide the image on different devices.
Then in the Z-index field, you can add a z-index value to overlap the image over other elements.
You can repeat the process to edit the other item.
You can click on the + Add Item button to add more images.
Now you’ll see a beautiful image scrolling effect in the section as you scroll the page.
