纯 CSS 视差与实际互动内容 'background'？

Question

我需要实现一种视差效果，其中各种各样的东西是 "background" 层，如视频、画布或其他交互式东西，而文本墙滚动，当这些文本 "end" 我需要能够滚动到下一张幻灯片，再次保持任意数量的东西作为它的 'background'。请参阅 http://imgur.com/87iJllW 以获取简单参考（笑脸 = 交互式内容，矩形 = 文字墙）。

我可以用纯 CSS 做些什么吗？或者我需要求助于像 ScrollMagic 这样的库来实现这种效果吗？

Answer 1

使用：background-attachment: fixed;

本质上，背景是 "fixed" 元素，当它向上滚动时，您的图像也会向上滚动。

More info

更新： 位置：绝对化你的元素到你的父元素。

UPDATE2: 好的，here and here 看起来很有希望。创建自定义 fiddle.

UPDATE3 JSfiddle 的草稿。主要逻辑：

.depth-1 {
  position: relative;
  background: red;
  width: 100%;
  height: 100vh;
  margin: 10px;
}

.depth-2::-webkit-scrollbar {
  display: none;
}

.depth-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  overflow-y: scroll;
  color: blue;
}

.depth-3 {
  width: 100%;
  padding-right: 17px;
}

.dont-move {
  height: 50px;
  width: 100px;
  z-index: 10;
  position: absolute;
  background: grey;
  right: 10px;
  top: 10px;
}

<div class="depth-1">
  <div class="depth-2">
    <div class="depth-3">
      <div class="depth-4">
        ...
      </div>
    </div>
  </div>
  <div class="dont-move">
    ...
  </div>
</div>
<div class="depth-1">
  <div class="depth-2">
    <div class="depth-3">
      <div class="depth-4">
        ...
      </div>
    </div>
  </div>
  <div class="dont-move">
    ...
  </div>
</div>

UPDATE4: 更新了 JSfiddle，增加了格式。主要问题是它不会 "clear" 在滚动新部分之前的最后一部分。

纯 CSS 视差与实际互动内容 'background'？

Pure CSS parallax with actual interactive content as 'background'?

css

parallax

interactive