Parallax effects are based on one of two elements: Parallax scrolling effects, which are based on scrolling through the page, and mouse effects, which are based on the movement of the user’s mouse.
In this tutorial we’ll cover how to add parallax backgrounds and scrolling effects in Elementor.
Note: to enable Parallax Effects, you’ll need Elementor Pro
There are 2 different ways to use parallax in Elementor Pro. The first is parallax effects for web elements and the second is parallax effects for the background.
If you want to skip reading, you can watch Elementor’s own how to video here, otherwise read on for more detail…
Parallax Effect on a Web Element
Step 1: Choose an Element and Add Parallax
In order to add some parallax magic to your Elementor Pro website, the first thing you need to do is pick which element you want to add it to. This could be a picture, text, video, etc.
Let’s get started by clicking on the widget and going to the Advanced Tab.
Step 2: Under Motion Effect, Switch to Scrolling Effect
Once you’re on the advanced tab, click the Motion Effect dropdown and then set Scrolling Effects to On. Now you can choose any of the 6 animations that will bring your website to life.
Read more about what you can do with them here
Step 3: Adjust the Animation According to Your Needs
You can change and tweak each effect to get it just right. Simply press the pencil icon and a window will open up with controls.
For each effect, you can adjust the direction, speed, and viewport which controls when the animation starts and when it ends.
In addition, you can define on the Viewport scale on what part of the scroll your effect will start and on what part it will end.
Step 4: Pick More Than One Animation for a Single Element
For every element, you can apply as many effects as you like; just DON’T overdo it.
Pressing on the arrow button next to the pencil will undo the animation so feel free to experiment and play around with it until you get it just right.
For the Rotate and Scale position you can adjust the “X” and “Y” anchor points which determine the axis around which the element scales or rotates.
Step 5: Add Mouse Track & 3D Tilt
This one works only on desktop devices obviously but you can make elements move based on your mouse movement. Imagine you want to have an overlay parallax of stars and you want to make them interact with your mouse.
We have two options here: Mouse Track that Creates a sense of depth by making elements move in relation to the visitor’s mouse movement and a 3D Tilt effect that tilts the element according to the same movement of the cursor.
Step 6: Apply Parallax (Only the Motion Effect) on Different Devices
An effect that works well and looks good on desktop, wouldn’t necessarily work well on mobile. Luckily, Elementor 2.5 lets you pick which devices you want to apply the effects to.
Parallax Effect on a Background
Step 1: Go to Your Elementor Website and Click on One of the Website’s Sections
Now let’s add some parallax to the background to give the website a greater sense of depth. To do this, we need to start with the Style tab.
Step 2: Under the Background Section, Switch to Motion Effect or Mouse Effect
Now you can choose between 2 different effects that you can apply to your background layer: the scrolling effect and the mouse effect. Read more about them here.
Step 3: Repeat Steps 3 to 6 From the Previous Session
It’s exactly the same effects and implementation as before, only now it can be applied on the background too!
See how it works here:
Want to learn more? read Elementor’s documentation on Motion Effects and Vertical Scrolling