An image parallax section is an excellent method to introduce depth and dynamism to your website's visual content. This feature creates a captivating illusion where images appear to move or shift in perspective as users scroll through the webpage. With the parallax effect, static images transform into fluid visuals, enhancing the overall user experience by adding a sense of depth and interactivity.
How the Image Parallax section works
The parallax effect adjusts the position of background images relative to the user's scroll movements. As users scroll down or up the page, the background image appears to move at a different speed than the foreground content, creating a sense of depth and immersion.
Implementing Image Parallax:
Adding the Parallax Section: Drag and drop the Image Parallax section from the Add Menu onto your canvas.
Customizing the Effect: Select an image and adjust the parallax settings to control the speed and intensity of the effect.
Enhancing Visual Storytelling: Integrate parallax sections strategically to highlight key content or create visual interest.
Configuration options
Double-click on the Image Parallax section to open its configuration menu.
Inside the configuration menu, input a percentage value to determine the intensity of the parallax scroll effect. This value controls how much the background image moves relative to the user's scrolling, creating a dynamic and immersive visual experience.
Use the preview mode to observe how the parallax effect behaves with different percentage values. Adjust as needed to achieve the desired visual impact.
Limitations
When placing the Image Parallax Section immediately after a Scrollytelling Video, users may encounter unexpected behavior when viewing your website on Mobile Safari.
This issue typically arises due to compatibility issues or conflicting behaviors between the parallax effect and the scrolling behavior implemented in the Scrollytelling video specifically on Mobile Safari. It's essential to note that Mobile Safari may handle scrolling and animation differently compared to other browsers, leading to inconsistencies in how the parallax effect and the Scrolly Telling Section interact.