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

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

说明：

当用户垂直向下滚动页面时，坚实的背景会让位于背景图像，即“la”。然而，另一个水平条不是仅仅到达页面底部，而是以与前一个“固体背景”相同的速度移动，从底部覆盖背景图像。当用户继续滚动时，固体背景再次让位给背景图像，但这次背景已更改为其他图像。这种效果类似于魔术师在一个物体前挥舞他的手，而物体以某种方式发生了实质性的变化

另一种说法是，固体背景中存在“间隙”，尽管可以看到不同的背景图像

下面是我找到的一个例子（经过一段时间的搜索）：
（忽略顶部的“图库”式旋转图像。向下滚动并注意池的图片，然后是一个上面有大象的灯。）

起初，我认为它可能是类似的东西，但它实际上似乎是实质性的不同

---

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

这是通过在移动

divs

时利用背景附件属性创建一种效果来实现的，这种效果会使图像看起来发生变化，而实际上只有两个

divs

只需向上滚动屏幕即可

请查看此代码笔以获取演示：

重要部分包括：

HTML

---

这是通过在移动

divs

时利用背景附件属性来创建一种效果，使图像看起来发生变化，而实际上，只需向上滚动屏幕即可获得两个

divs

请查看此代码笔以获取演示：

重要部分包括：

HTML

---

不这与我描述的不太相符。忽略顶部的“画廊”样式图像。向下滚动，看看游泳池的图片，如果你继续滚动，还有大象灯。很抱歉，我现在看到了网站正在做什么。我将更新我的答案，以更正确地反映该站点的功能。我已更新示例，使其与您共享的站点相匹配。由于图像加载速度不够快，该示例可能会显得有些不稳定。这可以通过在隐藏的

div

中的

img

标记中预加载图像来解决。这是一次大胆的尝试来复制效果，但仍然不正确。如果您转到示例页面，并使用Chrome的DOM编辑器将“ancre4”div的高度更改为50%，您可以通过滚动的方式同时看到两个背景图像。效果与a相似，只是有两个完全不同的图像。好的。在深入挖掘DOM、JS和CSS之后，我想我已经找到了解决方案。我已经更新了解决方案，以反映网站的功能。谢谢你容忍我错过了你要找的东西不。。。这与我描述的不太相符。忽略顶部的“画廊”样式图像。向下滚动，看看游泳池的图片，如果你继续滚动，还有大象灯。很抱歉，我现在看到了网站正在做什么。我将更新我的答案，以更正确地反映该站点的功能。我已更新示例，使其与您共享的站点相匹配。由于图像加载速度不够快，该示例可能会显得有些不稳定。这可以通过在隐藏的

div

中的

img

标记中预加载图像来解决。这是一次大胆的尝试来复制效果，但仍然不正确。如果您转到示例页面，并使用Chrome的DOM编辑器将“ancre4”div的高度更改为50%，您可以通过滚动的方式同时看到两个背景图像。效果与a相似，只是有两个完全不同的图像。好的。在深入挖掘DOM、JS和CSS之后，我想我已经找到了解决方案。我已经更新了解决方案，以反映网站的功能。谢谢你容忍我错过了你要找的东西。

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

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