Elements scroll one by one

Question

I'm currently trying something out which i saw on another website.

Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.

I already tried position: sticky etc. but it did not worked as I wanted.

Can someone help me? I would be so happy!

.poster-middle {
        width: 100%;
        height: 100%;
        top: 0;
        position:-webkit-sticky;
        position:sticky;
    }

    .poster-middle-img {
        margin-top: 500px;
    }

    .poster-left {
        width: 100%;
        height: 100%;
        top: 0;
        position:-webkit-sticky;
        position:sticky;
    }

       .poster-left-img {
        margin-top: -700px;
    }

        .poster-right {
        width: 100%;
        height: 100%;
        top: 0;
        position:-webkit-sticky;
        position:sticky;
    }

       .poster-right-img {
        margin-top: -700px;

    }


<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>

right now everything is scrolling up together

Answer 1

You can achive this with pure css.

The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.

When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.

  position: -webkit-sticky;
  position: sticky;
  bottom: -200px;
  margin-bottom: 300px;

The rest is normal positioning.

I created a little fiddle to show a full example. You can build your solution from there very easily.

I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)