The Mouse Parallax interaction creates an effect where a selected element (like an image) appears to be pushed or pulled by the moving cursor. This adds a dynamic feel to the layout, engaging the visitor's cursor movement as part of the experience.
Get started by finding the interaction when opening the Interactions tab and selecting the "Mouse Parallax" interaction. 🔗 Learn how to use interactions.
Setting Parallax Movement
The Mouse Parallax interaction offers both convenient preset movements and fine-tuned control, allowing you to customize the effect.
Selecting the Preset
You can choose between two default movements: Push or Pull. By default, the interaction is set to Push.
Preset | Total Movement | Visual Effect |
Push | The element moves -20px from its initial position, following the direction of the cursor. | The element appears to be pushed in the direction you move the cursor. |
Pull | The element moves +20px from its initial position, following the direction of the cursor. | The element appears to be pulled in the direction you move the cursor. |
Setting a Custom Movement
For a more precise or stronger effect, you can enable the custom control by pressing the slider button next to the "Movement" label. This activates a slider that lets you customize the movement range between -500px and +500px.
0px: If set to 0 pixels, the element will have no movement triggered by the cursor, resulting in no effect.
Stronger Effect: The further the value is from 0 (whether
-500or+500), the more dramatic the effect will be.