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

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

horizontal

Going further, we can also configure the effect in such a way that the background photo changes its transparency level. Example below.

Transparency

transparency

The fourth effect is blur. By scrolling the page we can make the background photo go from blurred to sharp and vice versa.

Blur

blur

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.

Scaling

scaling

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:

Various effects

rotation

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.

Mouse effects

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.

wolf3
3dtilt

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.

wolf3
track

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!

Share

See also

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!

Pabbly Connect LifeTime
Pabbly Connect

A tool to automate online business processes and integrate the website with...

Now4real

Build community and increase engagement on your site using Now4real.

Play.ht lifetime
Play.ht

Turn your website publications into high quality audio recordings.

2 Comments

  1. Sebastian says:

    Mega functionality. Especially impressive is the video. I never thought I'd see tools for laymen that allow you to do such wonders.
    Recently there was a birthday promotion for Elementor Pro and I was tempted and it was a hit. How I could run a site without it before, I have no idea. People, don't even think about buying it unless you like a challenge, but if you value your time and have no ambition to become a programmer Elementor Pro is for you as it is for me.

    Thanks Krzysiek for this site and everything you do to make it easier for people like me.

Leave a Reply

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