javascript - 滚动时如何在水平条后面实现视差

Question

我已经见过这种效果好几次了，但我找不到它的“名字”——它叫什么名字？这种效应背后的基本理论是什么？它是使用纯 CSS，还是主要由 JS 驱动？

描述:

当用户垂直向下滚动页面时，纯色背景让位给背景图像，就像“curtain reveal”一样。然而，不仅仅是到达页面底部，另一个水平条以与之前的“纯色背景”相同的速度移动，从底部覆盖背景图像。随着用户继续滚动，纯色背景再次让位于背景图像，但这次背景已更改为其他图像。其效果类似于魔术师在物体前挥动他或她的手，物体以某种方式发生显着变化。

另一种说法是纯色背景中存在“缝隙”，通过这些缝隙可以看到不同的背景图像。

这是我找到的一个例子(经过大量搜索):http://www.astoriacassis.com/
(忽略顶部的“画廊”式旋转图像。向下滚动并注意游泳池的图片，然后是一盏上面有大象的灯。)

最初我认为它可能类似于 parallax effect , 但它实际上看起来有很大的不同。

我以前见过这种效果，我想知道如何复制它。

Answer 1

这是通过在移动 div 时利用背景附件属性来创建使图像看起来发生变化的效果来实现的，而实际上它只是两个 div向上滚动屏幕。

查看此 CodePen 以获得演示:http://codepen.io/anon/pen/sCuvI/

重要部分:

HTML

<div class="content">
  Lorem Ipsum
</div>
<div id="s1" class="scroll"></div>
<div class="content">
  Lorem Ipsum
</div>
<div id="s2" class="scroll"></div>

CSS

.scroll
{
  width: auto;
  height: 200px;
  /*The important part*/
  background-attachment: fixed;
  background: no-repeat center center fixed;
  /*Stretch the background*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}