Making background image reveal bottom first when scrolling? - html

Question

I am attempting to make a feature like https://www.artyofficial.com/ has.
When scrolling down, the bottom of the second image will appear while the first image starts to get cut away. How is something like this achievable with CSS? I would post a style sheet but unfortunately I don't even know where to begin here.

Answer 1

What you are looking for is the parallax scrolling effect
The most important property is the background-attachment: fixed; here.
I made you a JSFiddle easy as possible, take a look at it.

Answer 2

I would start by looking at the background-attachment property, it has a value of:
fixed The background is fixed with regard to the viewport

Answer 3

It is called as parallax effect. You can refer to link: Parallax Effect
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element -->
<div class="parallax"></div>

Answer 4

You just need to give all your such consecutive div's background-attachment: fixed. Check the example below:
.panels{
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.panels:nth-child(1){background-image: url('http://lorempixel.com/400/200/sports/');}
.panels:nth-child(2){background-image: url('http://lorempixel.com/400/200/nightlife/');}
.panels:nth-child(3){background-image: url('http://lorempixel.com/400/200/cats/');}
.panels:nth-child(4){background-image: url('http://lorempixel.com/400/200/food/');}
.panels:nth-child(5){background-image: url('http://lorempixel.com/400/200/nature/');}
/* this is for hiding stackoverflow console */
.as-console-wrapper{ display: none !important; }
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>