A few days ago a new version of Elementor Pro was released, numbered 2.5. The main change or rather an addition that appeared in this version of the plug-in are the animation effects that we can implement on our website. Let's take a look at them.
The classic Parallax effect
The effect can be said to be as old as the world, although it appeared in Elementor only now. But better late than never 🙂 Many users of this awesome builder waited impatiently for this addition and... they got it.
How does this effect work? By scrolling down or up the page, the background of the object in question also moves, but at a different rate or in a different direction. This is exactly how it works below. Scroll up and down the page and see how the background photo behaves.
Classic Parallax effect - Vertical
But that's not all. We can configure the effect so that the background photo moves horizontally. Below you can see an example of such an effect.
Classic Parallax effect - Level
Going further, we can also configure the effect in such a way that the background photo changes its transparency level. Example below.
The fourth effect is blur. By scrolling the page we can make the background photo go from blurred to sharp and vice versa.
And finally, the last effect is scaling. By scrolling up and down the page, the background photo can be made bigger or smaller, or should I say closer and further away. I think I like this effect the most out of all of them, but see and judge for yourself.
Each effect can be configured as you wish and does not have to apply only to the background itself. In fact, each object can have its own independent configuration and behave in a different way. Look how it can look like in the example below. We have, as everywhere above, three objects: background, text and additional picture. I gave different parameters to each of them. Additionally, in this case I still have the possibility to apply a rotation effect (in the case of the background this effect does not exist). The result:
Great, right? Yes, you may get dizzy on this page now, but that's only because I applied those few effects one after another in one place. If you want to use them in production you will certainly want to do it in moderation and in a more subtle way, so that the effect applied carries with it an additional message, and is not just a "page turner", because that is not the point.
It is great to combine a photo with other graphic elements that will make the photo come to life. It will be a little bit of fun because you have to prepare the objects properly (without the background), but the final effect can be really great. Everything is up to your creativity.
But that's not all. We also have additional ones available, which will make objects move when we move the mouse cursor over them. Here's an example of a 3D Tilt effect. Move the mouse cursor in different directions to see how the image below will behave.
Another less complicated effect is that the photo moves with the movement of the mouse cursor. This effect can also be used very well when the whole object will consist of several elements and then the whole composition will become interactive just like before, it can even tell a story.
Effects also work on mobile devices. Except for mouseover effects, which are unlikely to be seen on smartphones. Skillful use of them can significantly contribute not only to the attractiveness of our site, but probably more importantly can have a very positive impact on the experience of its visitors. Just remember about moderation, because over-saturating such effects as in this article 🙂 can have the opposite effect.
Below is a video from the manufacturer where you can see other very impressive examples of how Elementor's new capabilities can be used in this field.
I was worried that using this type of effect would negatively affect performance, but it turns out that my fears were not confirmed. The tests I conducted showed that their use did not lower the value of metrics on, for example, Pingdom or GTmetrix. And this is another great news.
The effects are available in the latest release of Elementor, but beware... in the PRO version. The free plug-in unfortunately will not allow you to implement these effects. The PRO version can be found on the manufacturer's website: http://jzswp.pl/elementor
Other articles on Elementor
No posts found!
In the context of Elementor 3.3, I could write about only one of its novelties, which is awaited by the vast majority of web developers using this
Elementor 3.0 was released on 25 August in both free and paid versions. After the publication many people started to report problems with the functioning of the new version of the builder.
May and June are conducive to anniversaries. We just celebrated WordPress' 18th birthday, and in June we have another opportunity to celebrate, because Elementor exactly 5 years ago
Free information on JZS news
I invite you to become a subscriber! Thousands of readers already subscribe to news from JZS.
You can unsubscribe at any time. Your address is safe here.
Featured LifeTime Offers!
A tool to automate online business processes and integrate the website with...
Build community and increase engagement on your site using Now4real.
Turn your website publications into high quality audio recordings.