javascript - How to create image scrolling parallax effect with CSS?

Question

I saw this cool scrolling effect online...

Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out? How can I create this effect on the web?

Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/

I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top.

Any ideas?

Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.

Answer 1

This can be done using background-attchement:fixed and two similar images.

Here is a simple example:

body {
  min-height:200vh;
  margin:0;
  background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
  background-attachment:fixed;
}

.box {
  margin-top:220px;
  height:200px;
  background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
  grey;
  background-attachment:fixed;
}

<div class="box">

</div>