The Complete Guide to Parallax Effects in 2019 – Part 2

Using Elementor's new parallax effect is going to step up your web design-game, but there are a few essential things you need to know. In the second part of our Parallax guide, we'll give you step-by-step instructions so you can start applying some magic right away.

In the first part of our Parallax effect guide, we introduced you to a variety of options… So now that you know all about the opportunities this brand new feature affords you, let’s get our hands dirty and feet wet with some practical stuff.

In this article, I’m going to give you step by step instructions for using the new Elementor 2.5 to add parallax effects to your site. You’ll be amazed at how easy it is to add Parallax effects and get your web design-game stronger than ever – all with no coding required.

First thing first: There are 2 different ways to use parallax in Elementor 2.5. The first is parallax effect for web elements and the second is parallax effect for the background. We’ll go through both, step by step so stay tuned.

Parallax Effect on a Web Element

Step 1: Choose an Element

In order to add some parallax magic to your Elementor website, the first thing you need to do is pick which element you want to add it to. This could be a picture, text, a video, etc.

For this tutorial, I’ll go with something very simple as to make it easier to demonstrate the changes as we go along.

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 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:

That’s About It!

After years of trying to learn how to code a parallax effect, I’m happy to report that it’s now easier than ever. Just follow the steps in this article and start creating your brand new parallax website. Need some inspiration?

Go to our previous article and see how you can make your website really stand out!

Liked This Article?

We have a lot more where that came from! Join 620,147 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Yuval Keshtcher
Yuval Keshtcher
Solving problems for different companies using visual design and content. Founder of UX Writing Hub, the first UX writing course in the world.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

6 Responses

  1. This is great, very useful and opens up tons of possibilities. I love the horizontal parallax scrolling options. Purchased Elementor pro last month and don’t think I will be using traditional themes from here on out.

  2. Fantastic work you do and so happy to have purchased Elementor Pro – worth every dime!

    Am I wrong to assume this will load faster on frontend than regular visual composer parallax and similar plugins for such effects?

    Does it work well with WP Rocket [as I see you promote it for caching] with aggressive settings turned on, as per your post?

    How about the Rocket + CloudFlare minification or any issues to be aware of?

  3. Hello, great job. We urgently need more options in the form widget. We know all external plugins, but it would be great if Elementor extended its own form widget with useful features. Best regards

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 620,147 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.