写一个视差滚动效果的代码

以下是一个简单的视差滚动效果的代码示例：

HTML 代码：

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    <img src="background.jpg" alt="Background Image">
  </div>
  <div class="parallax__layer parallax__layer--front">
    <h1>Welcome to my website</h1>
    <p>This is some sample text for the front layer</p>
  </div>
</div>

CSS 代码：

.parallax {
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.parallax__layer {
  position: absolute;
  top: ;
  left: ;
  right: ;
  bottom: ;
}

.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

.parallax__layer--front {
  transform: translateZ();
}

这个代码示例中，我们使用了一个 div 元素来包含两个子元素，分别是背景层和前景层。通过设置不同的 transform 属性，我们可以实现视差滚动效果。其中，背景层的 transform 属性包括了一个 translateZ 和一个 scale，这样可以让背景层在滚动时产生更大的视差效果。前景层的 transform 属性只包括了一个 translateZ，这样可以让前景层在滚动时产生较小的视差效果。