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

#javascript #html #css #css3 #анимация

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



Когда одно изображение совмещается с последующим изображением при прокрутке по секциям.    

Я пытался воспроизвести этот эффект, но не могу понять, как сделать это?   

Вот ссылка, где я видел этот эффект: http://readingbuddysoftware.com/how-it-works/   

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

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

Ответы

Ответ 1

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

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



body {
  min-height:150vh;
  margin:0;
  background:url(https://lorempixel.com/g/100/100/) 50px 50px/auto no-repeat;
  background-attachment:fixed;
}

.box {
  margin-top:200px;
  height:200px;
  background:url(https://lorempixel.com/100/100/) 50px 50px/auto no-repeat,
  grey;
  background-attachment:fixed;
}







Так же вы можете легко масштабировать смешивая большее количество изображений:   



body {
  min-height:250vh;
  margin:0;
  background:url(https://lorempixel.com/g/100/100/) 50px 50px/auto no-repeat;
  background-attachment:fixed;
}

.box {
  height:200px;
  background:url(https://lorempixel.com/100/100/) 50px 50px/auto no-repeat,
  grey;
  background-attachment:fixed;
}
.box:first-child {
  margin-top:200px;
}








  

UPDATE  

Если вам не нравится решение с  background-image, то вам будет необходимо  использовать
некоторое количество кода JS для того, чтобы переместить IMG тег.   



window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
  --scroll-var: 0px;
}

body {
  min-height: 150vh;
  margin: 0;
}

img {
  position: fixed;
  top: 50px;
  left: 50px;
}

.box {
  margin-top: 200px;
  height: 200px;
  background: grey;
  position: relative;
  overflow: hidden;
}

.box img {
  top: calc(-200px + 50px + var(--scroll-var));
  /* margin of box + top of the other image + scroll*/
  position: absolute;
}


  





С несколькими изображениями:



window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
  --scroll-var: 0px;
}

body {
  min-height: 250vh;
  margin: 0;
  padding-top:200px;
}

img {
  position: fixed;
  top: 50px;
  left: 50px;
}

.box {
  height: 200px;
  background: grey;
  position: relative;
  overflow: hidden;
}
img.f1 {
  top: calc(-200px + 50px + var(--scroll-var));
  position: absolute;
}
img.f2 {
  top: calc(-400px + 50px + var(--scroll-var));
  position: absolute;
}
img.f3 {
  top: calc(-600px + 50px + var(--scroll-var));
  position: absolute;
}


  


  


  





Источник ответа