The Image Parallax Section
An Image Parallax Section is a powerful tool for adding depth and dynamism to your website's visual content. This feature creates a captivating illusion where a background image appears to move at a different speed than the foreground content as users scroll, enhancing the overall user experience with a sense of depth and interactivity.
How the Image Parallax Section Works
The parallax effect functions by adjusting the position of a background image in relation to the user's scrolling. As a user scrolls down or up the page, the background image moves at a slower or faster speed than the content in front of it. This creates an immersive visual experience.
Implementing the Image Parallax Section
Adding the Section: Drag and drop the Image Parallax section from the Add Menu onto your canvas.
Customizing the Effect: Select the section and upload a background image. You can then adjust the parallax settings to control the speed and intensity of the effect.
Enhancing Visual Storytelling: Use parallax sections strategically to highlight important content or to create visual interest as users navigate your page.
Configuration Options
To configure the parallax effect, follow these steps:
Open the Configuration Menu: Double-click the Image Parallax section on your canvas.
Adjust the Percentage: In the configuration menu, enter 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.
Preview and Test: Use the preview mode to observe how the parallax effect behaves with different percentage values. Adjust the value as needed to achieve your desired visual impact.
Limitations
When a Scrollytelling Video component is placed immediately before an Image Parallax Section, users on Mobile Safari may experience unexpected behavior. This is due to compatibility issues or conflicting scrolling behaviors between the two components. Mobile Safari may handle scrolling and animations differently than other browsers, which can lead to inconsistencies in how these specific components interact.