如何用CSS创建图像滚动混合效果？

Question

我在网上看到了很酷的滚动效果......

滚动部分时图像与下一图像混合的位置.我一直试图重现它,但我似乎无法弄清楚它？如何在网上创建此效果？

这是我看到效果的链接...... http://readingbuddysoftware.com/how-it-works/

我已经尝试使用position: fixed上与截图z-index越高,则图像的部分,但最后截图总是在顶部.

有任何想法吗？

更新:由于各种原因(包括放置,使用斜面......),我无法使用background-imagecss解决方案.我需要一个使用该<img>元素的解决方案.

Answer 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>

您可以使用许多图像轻松缩放:

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;
}

<div class="box">
</div>
<div class="box" style="background-image:url(https://lorempixel.com/100/100/sports);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://lorempixel.com/100/100/food);background-color:pink">
</div>

UPDATE

如果你不喜欢背景图像解决方案,你将不得不使用一些JS来移动img标签(我不认为你可以通过图像和没有JS实现这一点).

这是一个简单的例子,我用滚动更新框内图像的位置,我使用overflow:hidden它,以便在需要时显示:

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: 20px;
  left: 20px;
}

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

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

<img src="https://picsum.photos/g/150/150?image=1069">
<div class="box">
  <img src="https://picsum.photos/150/150?image=1069">
</div>

有很多图像:

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;
}

<img src="https://lorempixel.com/g/100/100/">
<div class="box">
  <img class="f1" src="https://lorempixel.com/100/100/">
</div>
<div class="box" style="background-color:yellow;">
  <img class="f2" src="https://lorempixel.com/100/100/sports">
</div>
<div class="box" style="background-color:pink;">
  <img class="f3" src="https://lorempixel.com/100/100/animals">
</div>