Как создать эффект смешивания прокрутки изображения с помощью CSS?

Я видел этот классный эффект прокрутки онлайн...

Если изображение смещается со следующим изображением при прокрутке разделов. Я пытался воспроизвести его, но я не могу понять это? Как я могу создать этот эффект в Интернете?

Я попытался использовать position: fixed на скриншотах с z-index раздела выше, чем изображение, но последний скриншот всегда находится сверху.

Обновление. По разным причинам (включая размещение, используя наклон...), я не могу использовать решение background-image css. Мне нужно решение для использования элемента <img>.

Ответы

Ответ 1

Это можно сделать, используя background-attachement :fixed и два похожих изображения.

Вот простой пример:

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

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

<div class="box">

</div>