css - 具有实际交互内容的纯 CSS 视差为 'background'？

Question

我需要实现视差效果，其中各种各样的东西是“背景”层，例如视频、 Canvas 或其他交互式东西，而文本墙滚动，当这些文本“结束”时我需要能够滚动到下一张幻灯片，再次将任意数量的东西作为其“背景”。参见 http://imgur.com/87iJllW仅供引用(笑脸 = 互动内容，矩形 = 文字墙)。

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

Answer 1

使用:background-attachment: fixed;

本质上，背景是“固定”在元素上的，当它向上滚动时，您的图像也是如此。

More info

更新:position:absolute化你的元素到你的父元素。

更新 2: 好的，here和 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 , 附加格式。主要问题是它不会在滚动新部分之前“清除”最后一部分。