The Problem

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

The Solution

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

example of how to Switch to Scrolling Effect

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.

example of how to Adjust the Animation According to Your Needs

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.

example of how to pick more than one animation for a single element

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.

example of how to rotate and scale the position

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.

example of how to add mouse track and 3d tilt

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.

example of how to apply parallax on different devices

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.

example of how to switch to motion effect or mouse effect

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

 


WooCommerce