Question

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

说明

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

另一种说法是在实心背景中有“间隙”，但可以看到不同的背景图像。

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

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

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

Answer 1

这是通过利用移动divs上的背景附件属性来创建一个导致图像看起来更改的效果来实现的，而实际上只有两个divs只是向上滚动屏幕。< / p>

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

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

1 个答案: