In this tutorial, we’ll create a sliding door movement with motion effects that you can add to your WordPress website or landing page using Elementor.
You’ll learn how to:
✔︎ Use custom width
✔︎ Add Z-index
✔︎ Add a horizontal scroll motion effect
Hey sorry from elemento here today we
are going to create a sliding door
animation effect that can help you
engage your users and add some fun to
your website or landing page let’s dig
in
I’ve already created my design here so
let’s add our sliding door effect drag
in an image widget
and let’s choose this one here I’ve
prepared this image myself it’s just a
white rectangular 2000 by 3000 pixels so
let’s choose it and click on insert
media under content image size set it to
full and under advanced set the z-index
to 1 under custom positioning width
choose custom and set the custom width
to 150 VW now under position set it to
absolute in horizontal orientation set
it to right change the units to VW and
set the offset to -5 under vertical
orientation leave it on top and change
the offset to minus 95 all right as you
can see a white image covers all of our
content so let’s bring it back to the
front right click and open navigator and
click on the heading and other advanced
z-index 32 to do the same for the text
editor and the button now for the image
on the right column let’s set the
z-index to 5 cool our content is back
now let’s create the animation click the
white image and under motion effects
flip the switch on Mouse effects in the
mouse track settings leave the direction
as opposite and change the speed to 5
and that’s it let’s update our page and
check it out cool we created a sliding
door effect adding animations to engage
your site visitors is always a good idea
don’t forget to subscribe to our YouTube
channel for more videos webinars and
tutorials coming your way
see you later
