Question

我需要实现视差效果，其中各种各样的东西是＆＃34;背景＆＃34;层，如视频，画布或其他互动的东西，而文字的墙壁滚动，当这些文本＆＃34;结束＆＃34;我需要能够滚动到下一张幻灯片，再次举行任何数量的事情作为其背景＆＃39;。有关简单参考，请参阅http://imgur.com/87iJllW（笑脸=互动内容，矩形=文字墙）。

我能用纯CSS做些什么吗？或者我是否需要求助于像ScrollMagic这样的库？

Answer 1

使用：background-attachment: fixed;

从本质上讲，背景是固定的＆＃34;对于元素，当它向上滚动时，你的图像也是如此。

More info

更新：位置：您的元素绝对是您的父元素。

UPDATE2：好的，here和here看起来很有希望。创建自定义小提琴。

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，其他格式。主要问题是它不会清除＆＃34;清除＆＃34;在滚动新部分之前的最后一部分。

纯CSS视差与实际互动内容作为＆＃39;背景＆＃39 ;?

1 个答案: