hello and welcome to red stapler channel
in this tutorial I am going to show you
how to create a parallax scrolling
effect that makes the element appears
that they are scrolling and a different
speed with a bonus code that I have
combined as with an animated snow
background from previous tutorial to
create a stunning effect for your
website ready let's check it out
let's talk about the key concept that creates the parallax first. The parallax is the
effect that the object in the distance
appears to move more slowly than the
object close to the eye so based on this
if we create two divs with one of them
push into the back for some distance we
also see the parallax effect when
scrolling through the website
let's create two wrapper divs one for
parallax and one for regular
also added some content inside too
for the CSS first I'm going to set our
width and height to 100% of the viewport
and added some padding and background for aesthetic purpose
I set the box-sizing to border-box
to include the padding into the width
and height and make our wrapper size exactly at 100% off the viewport
and next I'm going to add a pseudo
element to the parallax wrapper
this element will be served as a background so we are going to add a transform to it
later but for now let's set the size
position and background image first
adding position:absolute is important
since we want this element to be in
background and out of the way for the
content let's add a background image to
the regular wrapper too
okay the structure is complete let's
work on the parallax. First set the
overflow:hidden to root element and
height of the body to 100% of the
viewport. This is to fix the viewing area
then add a perspective to instruct the
browser to display in 3D perspective
mode also add a preserves 3d transform
style to the body and a parallax wrapper
a next set overflow-x to hidden an
overflow-y to auto. This because we're
working in 3d mode and we do not want a
horizontal scroll bar to appear for the
off-screen content
next we are going to push the background
into the back by adding translateZ for -1px
by adding this the distance between the
viewing area and this element becomes
farther as a result you will see the div smaller. Since we set the
perspective value to one pixel
and we also move the div back for one
pixel you will see the div at half of
the original size
to counter this we will scale the div
by two times
almost complete now you will see that
the regular div is being overlaid by the
parallax we can fix this by setting the
z-index of the parallax wrapper to
negative and regular to positive
since z-index only works on positioned
element I'm going to also add position
relative to the regular wrapper and
here's the result
now adding more content is very easy you
can just duplicate both wrappers and it's done
with this concept you can combine it
with any CSS background effect that you
like to create an awesome user
experience for example here is the
combination of the parallax effect with
the snow from our previous tutorial you
can find all the links at the
description box below so that's all for
this tutorial if you loved it as always
please don't forget to like or subscribe
to support us thanks for watching and
see you an example bye
