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

Question

我现在已经看过几次这种效果了,但是我找不到它的"名字" - 它叫什么？这种效应背后的基本理论是什么？它是使用纯CSS,还是主要由JS驱动？

描述:

当用户垂直向下滚动页面时,纯色背景让位于窗帘 " 窗帘显示 "的背景图像.然而,不是仅仅到达页面的底部,另一个水平条,以与前一个"纯背景"相同的速率移动,从底部覆盖背景图像.当用户继续滚动时,纯色背景再次让位于背景图像,但这次背景已更改为其他图像.效果类似于魔术师在物体前面挥动他或她的手,并且物体以某种方式显着变化.

另一种说法是在实心背景中有"间隙",虽然可以看到不同的背景图像.

这是我找到的一个例子(经过一段时间的搜索):http://www.astoriacassis.com/
(忽略顶部的"画廊"式旋转图像.向下滚动并注意游泳池的图片,然后再看一盏带有大象的灯.)

最初我认为它可能类似于视差效果,但它实际上看起来大不相同.

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

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