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

Question

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

说明：

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

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

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

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

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

Answer 1

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

查看此 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;
}