Table of Contents
What is Parallax Effect?
We see dozens of websites daily but not each one of them succeeds in grabbing the attention of its targeted audience, some do the job pretty well while a few just don’t. The key factor to grab a user’s attention is to provide him with not only the better interactivity but, also a good User Experience (UX) too.
It may sound easy but it’s tricky Parallax effect with Elementor is surely one of the best ways to do this job on WordPress.
Fundamentally parallax is a scrolling effect which makes the background image to move at a slower pace than the foreground images/elements, this in result gives the illusion of a three-dimensional view in a two-dimensional space.
Parallax was being widely used in gaming industry since so long, but now the web industry has got it covered too to create interesting and eye-catching effects for the users.
Step by Step Guide to Create a View with Parallax Effect.
Step 1: Preparing the Elementor Canvas
Create an Elementor canvas, and add a single structured column with the following settings:
- Go to the Layout tab.
- Set the Content Width to Full Width.
- Set the Height to Min Height and give it a value of 120 VW.
- Set the Column Position to Middle.
- Next, go to the Style tab.
- In the Normal and Classic Background Type, choose the background image from the library. (All the images used are linked below in the article, you can download them and follow along).
- Set the Position to Top Center.
- Set the Attachment to Fixed.
- Set the Size to Cover.
Step 2 : Start Creating Foreground by Adding your Initial Images.
Drag an image element from the menu on left and drop it in the canvas (in the same section). Set the following properties:
- In the Content tab, Choose the “Sun” image from library.
- Set the Image Size to Full.
- In the Advanced tab, expand the Positioning section.
- Set the Position to Fixed.
- Drag another image element in the canvas and drop it below the sun image.
- Choose the “Mountain” image this time from the library.
- Give it an Image Size of Full, from the content tab.
- In the Advanced tab, go into the Positioning section.
- Set its Position to Absolute. Giving the absolute position is the important part, it will let the layers of images being added on top of each other.
- Give it a Vertical Offset value of -387px to move it upward.
Your canvas should look like the following:
Step 3: Start Adding Layers of Images
- Open the Navigator by right clicking on canvas, and give your images proper names.
- Duplicate the Mountain image.
- And in the duplicated copy, add the “valley1” image from library.
- Rename the duplicated image to Valley1
- Now, duplicate this and set the “valley2” image on duplicated image element, rename it to Valley2.
- Duplicate this Valley2, set the “valley3” image on it and rename it to Valley3.
- Repeat the process with valley3 to create the Valley4 image by choosing “valley4” image from library.
- Finally, do the same to create Valley5.
The results will look like the following:
Step 4: Add some Decorative Images
It’s time to add some decoration, we will add some birds to the present view.
- Duplicate the Valley5 image and set the “birds” image on it from the image library.
- Rename the duplicated image to Birds.
Step 5: Adjust the Padding
- Click on the “column” from navigator.
- In the advanced section, set the Paddings to zero (0), this will make the images fit into the canvas while omitting the default canvas padding settings. You can note the difference by comparing the results with previous step.
Step No.6: Adjusting the Motion Effects
This step is the core essence in creating the actual parallax effect. It will add the scrolling effect while setting the speed at which the foreground images will be moving down with respect to the background image.
We will give the most rare image the highest speed value to go down, as it will eventually add the resistance for that image while going up. Moving along, the down speed value will gradually decrease with every progressive front image to make it a little bit more faster than the previous one while moving up.
Following are the steps to create this effect, follow carefully.
- From the navigator choose the Mountain image, go in its Advanced tab and expand the Motion Effects section.
- Enable the toggle button for Scrolling Effects.
- Under the Vertical Scroll, give it a Down direction, and set the Speed value to 12.
- Repeat the same step for Sun image, and give it the Speed value to 11 (Remember we have to gradually decrease the front image’s speeds).
- Follow same settings for Valley1 with the Speed value of 10.
- Valley2 Speed => 8.
- Valley3 Speed => 6.
- Valley4 Speed => 5.
- Valley5 Speed => 3.
- Repeat the same process with Birds image but instead of decreaisng the speed value, we will increase it to create a 3D illusion. Give the Down Speed value of 11 to it.
Step 7 : Adjusting the Vertical Offsets to Create a Realistic Distance between the Images.
This step is important to create some realistic relative distance between the images to avoid a really congested look for the view.
- Choose the sun image from navigator.
- Under the Advanced tab, go to the Positioning section.
- Set the Vertical Offset to -97 px.
- For Mountain, Vertical Offset => –475.
- For Birds, Vertical Offset => –529.
- For Valley1, Vertical Offset => –475.
- For Valley2, Vertical Offset => –473.
- For Valley3, Vertical Offset => –442.
- For Valley4, Vertical Offset => –389.
- For Valley5, Vertical Offset => –313.
Note: You can set the values of your own choice, these are just the ones we followed.
Results
Following are some snapshots of the obtained results:
Conclusion
In this article, we practically observed and created a real time Parallax effect in Elementor and saw how amazing it looks. The output illusions and the 3D effects are to die for. If you follow this step by step guide accurately and thoroughly you will surely end up having a nice web page with these cool motion effects which can then be used in your own website.
