Previously we had the end-of-the-week-tradition to stream talks by Alexandra Payne across our social media platforms.
We decided to make this even more interesting and productive. This Thursday, July 25, Alexandra will host a webinar where she will tell you how to create parallax effect with Elementor builder.
Here's a brief outline of the webinar:
- How to create simple parallax scrolling effect with no plugins?
- How to create complex parallax effects with JetElements add-on?
- How to create complex parallax effects with Elementor Pro?
Hi guys! Today we’re going to look definitely close at 3 ways to create Parallax effects. I’m sure that you’ll manage them very quickly, as these tutorials are based on free Elementor webinar by Alexandra Payne. So, don’t forget to watch/watch again her video to get a complete visual understanding!
Also, follow us on socials to stay informed about our new products, discounts, and free educational streams.
However, for a smooth start, we can’t neglect introductory parts. Hopefully, you think the same. Let’s go!
- What’s Commonly Known about Parallax?
- Parallax on Elementor WordPress
- Tutorial #1 - Backgrounds with Parallax Scroll Effect
- Tutorial #2 - Complex Parallax Backgrounds with JetElements Plugins
- Tutorial #3 - Parallax Backgrounds and Moving Elements with Elementor Pro
What’s Commonly Known about Parallax?
Parallax is the movement of objects relative to the distant background that changes from different positions of the observer.
First of all, this term finds its manifestation in astronomy and geodesy. The science of photography has transferred the rich capacity of parallax to modern web animation.
Parallax animation is widely used to cause catchy animation effects on websites backgrounds. It creates an engaging atmosphere while scrolling and gives more chances to a site. Such a one is more likely to get an interest of visitors from the search. Moreover, Parallax technologies can enrich pages with the illusion of 2D depth environment.
So, do you want to empower your WordPress website with the aforementioned benefits? Due to these tutorials, you’ll do it by yourself!
Parallax on Elementor WordPress
To begin, get assured that your site is based on WordPress. Or, seriously said, it’s necessary to install the Elementor Plugin to gain the maximum from our tutorials. This plugin suits numbers of purposes. It eases the process of building and customizing new pages and widgets. Plus, Elementor is fully user-oriented. Without knowledge in coding or web design, it makes accessible tons of stunning effects. Probably the most important is all possible Elementor extensions don’t slow website performance.
We’ll show you 3 different Parallax effects for backgrounds transitions. The first one is really free. The second requires JetElemets Addon. To make Parallax effects from the third lesson, you’ll need to buy Elementor Pro. As the most recent, Elementor team has launched Motion Effects in 2.6 Pro version. This feature allows making pages with moving elements and Parallax backgrounds without third-party plugins.
Tutorial #1 - Backgrounds with Parallax Scroll Effect
The first Parallax effect allows changing the type of background scroll. Discover how to make it on the free Elementor version without additional add-ons. It’s also very lightweight and won’t slow the performance of your website.
- Having opened the Elementor, create a new section.
- In the panel tab “Layout”, just pick any height you need. Nothing more is required to be done in this tab.
- Then move to the “Style” tab and opt “Image” as a background type.
- Continuing to work in the “Style” also mention “Fixed” for attachment and “Cover” as size kind.
- Now, you can see a nice Parallax animation effect on your page. It can meet varied designs and won’t distract your visitors from the main info. You can save these results or try something interesting on the text.
- We also want to show you one trick with text to boost the already created background animation.
So, decide what a text you don’t want to scroll with the rest of the page. As soon as you’ve done it, hover over your text to start editing heading. Click on “Duplicate” just like Alexandra shows.
- After, drag this duplicated text element and drop it in the section you’ve created and edited in the previous steps.
- Go on working with it in the panel tab “Style” to change its size that is up to you.
- In the “Advanced” tab, chose a new feature of Elementor “Custom Positioning”. There, click on “Inline (auto)” for width, “Fixed” for the position. Also, adjust offsets for horizontal and vertical perspectives.
Tutorial #2 - Complex Parallax Backgrounds with JetElements Plugins
The effect mentioned in this tutorial we’re going to create with the help of JetElements. It’s the best-selling addon for Elementor that provides around fifty widgets for different types of content. Although, for today, we focus only on Parallax functionality specifically to make complex animation backgrounds.
- Start clicking on “+” to open the library of pre-made pages and sections. You can opt the one like the most.
- In the panel tab “Layout”, adjust the height clicking on “Fit To Screen”. In this tab also find “Jet Parallax”, as it will be really needful in a few steps.
- Load the first image. To manage this action, move to the “Style” tab. As soon as you’ve done it, choose “Center Center” as the position, “Cover” as size. Other settings you can leave by default.
- Come back to “Jet Parallax” to edit layers for the animated backgrounds. Add your first element. In the webinar, it’s a picture of a dancer (to give you a better understanding).
- Make important edits to your image. Feel free to play with varied Parallax types and other options. To get the same results as in our tutorial, choose “Mouse Move” Parallax type, 50/50 background positions to get your visual element directly at the center, and “Transform 3D” animation property.
As well, pay attention to the speed. Usually, animation that performs on very high speed is distracting. So, take care.
- Add other items and edit them mostly the same way you’ve managed the customization of the first image. To achieve the effect that Alexandra has done, watch this part more attentively. Or, let creativity move you.
It’s recommended to make sure that z-Index is adjusted to the position of your layers. Edit size of each element considering that some have to be smaller and so on.
- Set the Parallax speed for your effect. And opt a Parallax type. We’ve chosen “Mouse Move”.
- For the background position, choose 80/60.
Enjoy results and don’t hesitate to check JetParallax to achieve this and lots of other animation effects even quicker!
Tutorial #3 - Parallax Backgrounds and Moving Elements with Elementor Pro
As it was already mentioned, this tutorial is based on the spectacular usage of Elementor Pro and its new Motion Effects Option. Here, you’ll learn how to make super cool Parallax moving elements, like these spinning plates from the video. Moreover, they are supplied with a background animation that reacts to the movements of the cursor. Even though it seems not effortless to manage it from the first sight, you’ll create it on your own very fast!
- Begin with a text element (the one that’s the closest to ours from the example). Opt a vertical type of scroll in the panel tab “Advanced”. This ensures this text to move at different speed comparing to other elements on the page. As for the blur, decide what degree is the most suitable for you.
- Now, move to your second visual element - a picture of a dish in our example. Edit it in the “Advanced” tab, “Motion Effects”. Turn on “Scrolling” and “Mouse Effects”, and “Rotate”.
As for the “Rotate”, there two additional tabs, “Speed” and “Viewport”. The last one indicates in which point the animation will stop while scrolling.
Also, setting “Mouse Scrolling” pay a bit more attention to the “3D Tilt” option to add the illusion of 3D movement.
- And, the last element of our animation. It’s the background. So, click on “+” to create a new section. In the “Layout” tab, choose 500 for “Min Height”.
- After, work in the “Style”. There, opt “Classic” as a background type and load your image. Go to the “Seize” and click on “Cover”. Choose “Center Center” for the position.
- Find “Scrolling Effects” and “Mouse Effects” - two new options in the Elementor panel. They are available only for Pro version users.
Turning on the “Scrolling Effects” you can adjust any you like for your page. However, for this tutorial, we need a horizontal type of scrolling. Also, activate “Mouse Effects” and “Mouse Track” to make the background image react to your cursor. As you may have also noticed, you can add a text.
It’s time to save your work and check how it performs. Hopefully, you like it!
In these tutorials, we have focused mostly on Parallax backgrounds. Feel free to let us know if you want to find out more on how to make Parallax or other effects on Elementor. You can do it in the comments. Stay tuned and wait for new tutorials!
Here is also the video of our Free Elementor Webinar ↓
Best WooCommerce CRM Options to Scale Your WordPress Store
WordPress E-commerce Plugins: Which to Choose?
How to Sell Products on WordPress?
Elementor From A to Z: Sheer Selection Of “How To” Tutorials
User Tutorials for Gutenberg WordPress Editor