In this tutorial, we’ll see how to create a cool sticky scrolling effect, showing 3 interchanging mobile images that scroll into one another.
You will learn how to:
✓ Make an image widget sticky
✓ Use the z-index
✓ Add animation
✓ Create a SUPER COOL effect
wonder how to create this trick well if
you stick around we’ll do this
step-by-step let’s go to editing with
Elementor open navigator and let’s stick
it to the side here let’s create our
first section click on the plus sign now
in the navigator let’s give it a name
for easy reference click on the section
handle to enter its settings and under
style let’s set a background color will
go with this light gray now drag in a
head language it Center it will write
app features and let’s set the style for
it wait
uppercase etc now duplicate and type in
our subtitle
and also under style let’s play with the
settings a little now drag in a divider
drop it under the subtitle and under
settings again we’ll play with it a
little bit let’s set some padding from
the top under advanced let’s add 100
pixels from the top now moving on to the
next section let’s pick a three-column
section this time and name it
let’s also add color to the section and
now drop an image in the middle column
and under style let’s play with the
settings a little change the width to
most important settings for this effect
sticky top now we need to add another
image here so let’s click the column
handle style background overlay and
let’s choose the same image again let’s
change the settings position center
Center repeat no repeat size contain and
let’s lower the opacity to 0.1 we can
see the overlay image sticking under the
image so to fix this go under advanced
and add a two pixels padding all around
now you can see it’s a perfect fit back
to our image under advanced scrolling
effect let’s set the offset to 250 and
the effects offset to a hundred and as
you can see we have the beginning of our
effect let’s add some more painting to
the section so click the section handle
and under the Advanced tab padding let’s
add 50 pixels to the top and a hundred
pixels to the bottom moving on let’s
drag in an image box widget
change the title let’s erase some of the
text choose an image and let’s play with
the style reduce the spacing with set to
color the size the weight the
description also let’s change it a
little line height 1.6 great now drag in
an image and under style change the
width to 52 and align to left in the
column setting let’s add some padding 30
pixels around in the image box widget
let’s add under the Advanced tab some
animation let’s set it from the right
duration fast delay 200 milliseconds
now we’ll add animation to this line
almost the same as the image box we’ll
add a fade in first and 600 milliseconds
now let’s add our left content copy and
paste here also copy then paste let’s
swap places
change the image to this one
also the alignment to the right let’s
change the image box image change the
title the animation duration fading from
left and 1100 milliseconds now to the
column content position bottom moving on
in the navigator let’s duplicate this
section change its name now the first
thing we notice is that the image from
the top section is covering our new
image from the section we’re working on
so let’s quickly fix this with two
simple settings click the first mobile
image and other advanced z-index set it
to 1 now click the image from the second
row bar under advanced z-index set it to
solved now let’s change the section
settings under style let’s change the
background color to this pink now the
image let’s change it to a different one
don’t forget we need to change the
columns image as well so under
background overlay change the image
now I’ll fast forward a little bit
because I’m quickly changing the columns
content now to the third part will start
from duplicating the first section in
the Navigator because it’s pretty
similar to the third one we’re creating
now so duplicate and now also let’s drag
it to the bottom and change its name as
you can see the second mobile is showing
on top of the third one so just like
previously we set its Z index so under
the image settings advanced set it to
three and as you can see it’s now under
the image now before we change the main
image let me quickly change the side
columns just like I did before so I’m
fast-forwarding here that’s it we’re
almost done now to our main image under
advanced this time we want to set the
sticky to none
because this will be the last image that
we scroll so you can see it’s stopping
but we can still see the first and
second section images this is because
they are still sticking and we don’t
want to cancel it so let’s find out how
to make it appear as though from a
certain point they are invisible let’s
add a new section one column and let’s
name it hide mobile will give this
section as the index that will be higher
five so it will hide everything behind
it
we’ll give it a color this gray you can
see it already hides a little now under
layout minimum height set it to 400 we
can still see the mobile here on the
bottom so we go to the height mobile
section settings and under advanced
margin we’ll set an – margin of 300 now
we see it covers our mobile so let’s
click the arrow down so to better see
when to step it now the image let’s
change the z-index property so it will
appear on top of the hide mobile section
let’s set it to six so back to our –
margin let’s see where would be a good
place to stop we see here is a good spot
we don’t see the Mobile’s behind it now
you see there hidden but the hide mobile
section covers our text here so let’s
click the column settings advanced set
the z-index to a higher number as well
let’s set it to 10 and now you see it’s
visible again so now we’ll start from
the top we see we got the effect the
first mobile goes under the second the
second Mobile’s
under the third one and then we stop the
other two mobile images actually keep on
scrolling only we hit them we just have
to remember to keep hiding them as long
as the page goes on now let’s update the
page and view it
we see the effect and the animations
from right to left
the stop part and also the part that
hides the mobile phones from the first
and second sections and on the way back
we see it also works when scrolling from
bottom to top now back in editing let’s
just add an extra designer’s touch
clicking the Navigator on the first
mobile section under the section
settings style shape divider bottom
let’s add a tilt give it a color and a
height 80 and let’s slide the flip here
I’ll add some padding from the bottom as
well let’s change it to 150 pixels and
now let’s do the same for section number
three only this time from the top
tilt same color same height no flip this
time add some height from the top 100
pixels so now let’s view what we’ve
created
that’s it hope you enjoyed these cool
tips and tricks tutorials don’t forget
to subscribe to our YouTube channel for
more tips and tricks like this see you
later
