In this tutorial, we’ll add a 3d parallax effect to our hero section on our WordPress website using Elementor.
You’ll learn how to:
✔︎ Layer images on top of one another
✔︎ Use vertical scroll on text
✔︎ Set fixed position to a section background
hi-oh heads if from elemental today I’ll
show you how to create this cool
mountain scene here a section with
parallax effect you’ll see how to
combine image layers motion effects and
absolute positioning to bring the design
to life so you can create cool motion
effects like these with your designs as
well so let’s dive in and see how it’s
done let’s start off with the hero
section I want the heading widgets to
stay where they are while scrolling this
way the mountains will cover them as
well so under advanced go to custom
positioning and set the position to
fixed I’ll change the horizontal offset
unit to VW and set it to 2 I’ll do the
same for the vertical offset and set it
to 25 I’ll go ahead and do the same for
the second heading here I’ve set the
vertical offset to 20 now let’s start
creating our mountain scene for this
design I’ve created a couple of image
layers and together they make up the
scene this allows us to add motion
effects to them and creates this subtle
movement where the mountain covers the
headings so I’ll go ahead and drag in an
image widget and I’ll choose this image
as the first layer set the image size to
full and under advanced and custom
positioning change the position to
absolute this allows us to add multiple
images on top of one another and create
the layered motion effect I want now go
ahead and duplicate the image and add
the next layer I’ll repeat this a couple
of times until my scene is done ok great
that looks good now as you can see the
heading widgets have disappeared so
let’s bring them back by changing the
z-index of our layers
first off I’ll open the navigator so
it’s easier to see the widgets select
the heading widgets and under advanced
set there z-index – – ok great now I’ll
go ahead and set the z-index of the
upper mountain layer images to 1 this
way they all appear behind the text now
the mountain layer images that will
cover the text while scrolling down they
need to repair about the
next widget so I’ll go ahead and select
them and set their z-index to three okay
great now that we’re done in
everything’s in place let’s add some
motion to the scene I’ll go ahead and
select the first mountain layer image
and under advanced in motion effects
switch on scrolling effects hit the
pencil icon next to the vertical scroll
to switch it on and set the direction to
down and speed to twelve go to the next
image and like before set the direction
to down but set the speed to eight
instead the same with the next image
here I’ll set the speed to six you get
the picture I’ll set this one to five
and the last one to three now let’s go
to the section settings I want the Sun
background image to stay put when we
scroll so in style set the attachment to
fixed great let’s move on to the second
section I’ll go ahead and drag in an
image widget over here and set its size
to full and under advanced I’ll change
the position to absolute horizontal
orientation to right and I’ll change the
offset unit to VW and negative 15 I’ll
do the same for the vertical offset unit
and set it to negative eighty as you can
see it moves app so it blends in nicely
with a mountain scene okay great now
let’s add some motion effects to this
sections content for the first heading
under advanced switch on the scrolling
effects set the direction to down and
speed to five set the viewport to
between zero and fifty percent on top of
this I’ll add a transparency effect so
switch it on and set the viewport to
between ten and 70% for the text widget
I’ll add a subtle transparency effect as
well I’ll set the viewport to between 15
and 55% and last but not least I apply
this effect to the inner section below
as well here I’ll set the viewport to
between 20 and 60 percent okay we’re
done let’s see it in action
cool
well that’s it now you know how to
create this cool mountain scene here a
section with parallax effect and bring
your own designs to life by combining
image layers motion effects and absolute
positioning don’t forget to subscribe to
our YouTube channel for more tips and
tutorials see you later
