如何使用 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 的类似想法，以避免使用剪辑路径或掩码

我将使用 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>