Porto includes a Mouse Parallax animation feature that adds depth and movement to your website by allowing elements to shift based on the user’s mouse position.
This effect works in both WPBakery Page Builder and Elementor, making it easy to craft visually engaging and interactive layouts.
Mouse Parallax can be applied to any element supported by Porto’s extended options.
How to Use Mouse Parallax in Each Page Builder
1. WPBakery Page Builder
In WPBakery, Mouse Parallax is controlled through the Porto Animation element.
- Open your page in WPBakery Page Builder.
- Add or edit an element.
- Insert the Porto Animation element or open its settings.
- Locate the Mouse Parallax section inside the animation settings.
- Enable and configure the options (detailed below).
- Save your changes and preview the animation.
Note: Porto Animation provides additional entrance and scroll effects, but Mouse Parallax is a separate option inside the same interface.
2. Elementor Page Builder
In Elementor, Mouse Parallax is available directly inside the Porto Options tab for every element.
- Select any widget or section in Elementor.
- Open the Porto Options tab in the left sidebar.
- Scroll to the Mouse Parallax controls.
- Enable and configure the effect.
- Update your page.
Tip: Because this is available for all elements, you can create layered, multi-depth parallax effects by applying different speeds to multiple elements.
Mouse Parallax Options
| Option | Description |
|---|---|
| Enable Mouse Parallax | Turns on mouse-tracking movement for the selected element. When enabled, the element responds to cursor movement. |
| Inverse Movement | Reverses the direction of the parallax animation. Instead of moving with the cursor, the element moves opposite to the cursor. |
| Speed | Controls how strongly the element reacts to the mouse. Higher values create larger, more dramatic movement. Lower values produce subtle, gentle motion. |
Usage Tips
- Layer multiple elements - To create depth, apply different parallax speeds to foreground and background items.
- Use inverse motion for contrast - Combining normal and inverse movements adds a more dynamic layered feel.
- Don’t overdo the speed - Extremely high movement values may distract users or cause layout overlap. Start with small values (0–1) and adjust as needed.
-
Ideal for
- Hero banners
- Floating icons or shapes
- Feature sections
- Decorative background layers
- Call-to-action sections
