实现一个苹果官网滚动视觉差的代码

苹果官网使用的滚动视觉差效果可以通过 CSS 和 JavaScript 实现。以下是一个简单的示例代码：

HTML：

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    <img src="back.png">
  </div>
  <div class="parallax__layer parallax__layer--base">
    <img src="base.png">
  </div>
</div>

CSS：

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.parallax__layer--back {
  z-index: -1;
}

.parallax__layer--base {
  z-index: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

JavaScript：

const parallax = document.querySelector('.parallax');
const layers = parallax.querySelectorAll('.parallax__layer');

function moveLayersOnScroll() {
  const scrollTop = window.pageYOffset;
  layers.forEach(layer => {
    const speed = layer.getAttribute('data-speed');
    const yPos = -scrollTop * speed / 100;
    layer.style.transform = `translate3d(0, ${yPos}px, 0)`;
  });
}

window.addEventListener('scroll', moveLayersOnScroll);

在这个示例中，我们创建了一个 `.parallax` 容器来包含两个图层，一个在背景中，另一个在前景中。每个图层都有一个自定义的 `data-speed` 属性，用于设置它们在滚动时移动的速度。JavaScript 中的 `moveLayersOnScroll` 函数将根据滚动距离计算出每个图层的位置，并将它们应用到 CSS 中的 `transform` 属性上，使它们随着滚动而移动。最后，我们在 `window` 对象上添加了一个滚动事件监听器，以便在滚动时更新图层的位置。