The Multilayer Parallax section adds a staggered parallax effect to your website by using multiple layers that move at different speeds. This creates a sense of depth and fluidity in your design. You can choose whether the layers move as visitors scroll the page or respond to their mouse cursor.
How to Add a Multilayer Parallax Section
You can add this section from the Add Menu in the top menu bar.
Click the Add Menu icon (shortcut: M).
Search for and select “Multilayer Parallax.”
Hover over the canvas and click where you want to add the section.
Styling a Multilayer Parallax Section
Once you’ve added the section, you can style it using the options in the right-side panel.
Clip content: Toggle this to hide any content that extends beyond the section’s edges.
Resize to fill vertically: Click this to set the section’s height to 100% of the viewport height.
Background: Add a solid color, a gradient, or a background image from your own library or from a free stock images library.
Aspect Ratio
You can specify and lock the aspect ratio of the section to maintain its proportions when it’s resized. To select from popular aspect ratios, right-click the aspect lock icon.
Configuring the Parallax Effect
The parallax effect is configured from the Properties tab. Select the Multilayer Parallax element inside the section, then open the Properties tab in the right-hand panel.
Under Parallax Mode, choose how the layers move:
Mouse: The layers respond to the visitor’s cursor movement.
Scroll: The layers move as the visitor scrolls the page.
You can then adjust the following settings:
Movement: Set the movement intensity to Low, Medium, High, or None.
Auto Scale: Toggle this on or off to help prevent issues with how the layers display.
Layer speed: Each layer can have its own movement speed. Drag the dots in the Properties tab to adjust the speed of each layer. For example, you can make some layers move faster than others to increase the sense of depth.
Open preview mode to see the effect in action. In Mouse mode, the layers respond to your cursor, and in Scroll mode, they move as you scroll. Both modes create a subtle 3D effect.
Editing Layers
You can view and edit the individual layers from the left-hand panel. Click Edit Layers to customize the images in each layer.
Note: For the layered effect to work correctly, the layer images need to be transparent PNG files.
Organizing Multilayer Parallax Sections
Once a Multilayer Parallax section has been added, it appears in the layers panel. You can drag it above or below other sections to place it where you need it in your project.
Select the section in the layers panel.
Click and hold it.
Drag it above or below the section you want.
Need more help?
If you have any questions, reach out to our support team at support@vev.design.