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