Question

我有一组三个元素，大致如下：

HTML

<div class="background">
  <div class="image">
    <img src="img.png"/>
    <div class="text">
      <span>Text</span>
    </div>
  </div>
</div>

假设我有简单的CSS来对它们进行分层，背景是第三个，图像是第二个，文本首先是与查看器的距离，并且它们都是相对于最顶层容器的中心。背景为background-image，所有图片和div元素都是透明的。

我要做的是让它们以相对于视口稍微不同的速度滚动。我对CSS transform和perspective属性并不是特别熟悉，但我想知道这是否可以在CSS中使用。有什么帮助吗？

Answer 1

当然可以！你正在用纯CSS来描述视差。这可能是example的帮助。 CSS技巧还深入描述了这一点，here

关键是设置变换以反映与用户的距离。

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}

一组分层，透明的元素只能在CSS中以不同的速度滚动？

1 个答案: