Table of Contents
What is Parallax Effect?
Step by Step Guide to Create a View with Parallax Effect.
Step 1: Preparing the Elementor Canvas
- 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.
- 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
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.
- 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.
Following are some snapshots of the obtained results: