如何使用 CSS 创建图像滚动视差效果？

Question

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

滚动浏览部分时图像与下一张图像融合的位置。我一直在尝试重现它，但我似乎无法弄清楚？ 如何在网络上创建这种效果？

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

我尝试在屏幕截图上使用position: fixed，而图片上方部分的z-index，但最后的屏幕截图始终位于顶部。

有什么想法吗？

更新：由于各种原因（包括放置、使用倾斜...），我无法使用background-image css 解决方案。我需要使用<img> 元素的解决方案。

Answer 1

这可以使用background-attchement:fixed 和两张相似的图片来完成。

这是一个简单的例子：

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>

您可以轻松缩放许多图像：

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

.box {
  height:200px;
  background:url(https://picsum.photos/id/1069/150/150) 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://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>

您也可以考虑使用img 和position:fixed，但您需要一些技巧来使用clip-path 隐藏溢出

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

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

.box {
  height: 200px;
  background: grey;
  clip-path: inset(0);
}

<div class="box">
  <img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
  <img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
  <img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
  <img src="https://picsum.photos/id/1024/200/120">
</div>

或者使用mask

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

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

.box {
  height: 200px;
  background: grey;
  -webkit-mask:linear-gradient(#fff,#fff);
          mask:linear-gradient(#fff,#fff);
}

<div class="box">
  <img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
  <img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
  <img  src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
  <img src="https://picsum.photos/id/1024/200/120">
</div>

为了更好的支持，这里有一些JS的类似想法，以避免使用clip-path或mask

我将使用 CSS 变量更新图像的位置，但您可以轻松做到：

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/id/1069/150/150?grayscale">
<div class="box">
  <img src="https://picsum.photos/id/1069/150/150">
</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://picsum.photos/id/1069/100/100?grayscale">
<div class="box">
  <img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="box" style="background-color:yellow;">
  <img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="box" style="background-color:pink;">
  <img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>