当前位置：首页 > 文章列表 > 文章 > 前端 > CSS实现视差滚动效果教程

CSS实现视差滚动效果教程

2025-08-15 10:26:46 0浏览收藏

视差滚动效果的核心原理是什么？

视差滚动的核心在于不同图层以不同的速度移动。通常，背景图层移动速度慢于前景图层，从而产生深度感。这可以通过CSS的transform: translate()属性和动画来实现。想象一下，你在火车上，近处的树木飞速掠过，远处的山脉却移动缓慢，这就是视差。

首先，我们需要设置HTML结构。假设我们有几个div，每个div代表一个图层：


  背景层
  中间层
  前景层

然后，使用CSS来控制这些图层的移动速度。关键在于data-speed属性，它定义了每个图层相对于滚动速度的移动比例。

.parallax-container {
  position: relative;
  height: 100vh; /* 视口高度 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 其他样式，例如背景图片等 */
}

.parallax-layer[data-speed="0.2"] {
  transform: translate3d(0, calc(var(--scroll-y) * 0.2), 0);
}

.parallax-layer[data-speed="0.5"] {
  transform: translate3d(0, calc(var(--scroll-y) * 0.5), 0);
}

.parallax-layer[data-speed="0.8"] {
  transform: translate3d(0, calc(var(--scroll-y) * 0.8), 0);
}

body {
  --scroll-y: 0;
}

接下来，我们需要使用JavaScript来更新--scroll-y变量。

document.addEventListener("scroll", function() {
  document.body.style.setProperty("--scroll-y", window.pageYOffset);
});

这种方法的核心在于CSS变量和transform: translate3d()属性。translate3d利用GPU加速，可以提供更流畅的动画效果。通过调整data-speed的值，可以精细地控制每个图层的移动速度，从而实现各种视差滚动效果。

如何优化CSS视差滚动效果的性能？

性能优化是视差滚动效果的关键。虽然CSS动画和transform属性已经相对高效，但仍然有一些技巧可以进一步提升性能。

使用translate3d开启硬件加速： 确保使用translate3d(x, y, z)而不是translate(x, y)，即使z轴设置为0。这可以强制浏览器使用GPU进行渲染，从而提高性能。
避免频繁的DOM操作： 尽量减少JavaScript对DOM的直接操作。例如，可以缓存滚动位置，只在必要时更新CSS变量。
使用will-change属性： will-change属性可以提前告知浏览器哪些属性将会被修改，从而允许浏览器进行优化。例如：
```
.parallax-layer {
  will-change: transform;
}
```
图片优化： 确保使用的图片经过优化，尺寸合适，并使用适当的压缩算法。过大的图片会显著降低页面性能。

节流（Throttling）和防抖（Debouncing）： 对于滚动事件，可以使用节流或防抖技术来限制事件处理函数的执行频率。这可以减少不必要的计算和渲染。

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const currentTime = new Date().getTime();

    if (!timeoutId) {
      if (currentTime - lastExecTime >= delay) {
        func.apply(this, args);
        lastExecTime = currentTime;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(this, args);
          lastExecTime = new Date().getTime();
          timeoutId = null;
        }, delay - (currentTime - lastExecTime));
      }
    }
  };
}

const throttledScroll = throttle(function() {
  document.body.style.setProperty("--scroll-y", window.pageYOffset);
}, 20); // 每20毫秒执行一次

document.addEventListener("scroll", throttledScroll);

如何创建更复杂的CSS视差滚动效果？

除了基本的垂直视差滚动，我们还可以创建更复杂的视差效果，例如水平视差滚动、多方向视差滚动，甚至与鼠标移动交互的视差效果。

水平视差滚动： 将transform: translateY()替换为transform: translateX()，并相应地调整data-speed的值。
多方向视差滚动： 同时使用translateX()和translateY()，并为每个方向设置不同的data-speed值。

鼠标移动交互视差滚动： 使用JavaScript监听鼠标移动事件，并根据鼠标位置动态调整图层的transform属性。这可以创建一种更具互动性的视差效果。

document.addEventListener("mousemove", function(event) {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2;

  const deltaX = (mouseX - centerX) * 0.05; // 调整系数控制移动幅度
  const deltaY = (mouseY - centerY) * 0.05;

  document.querySelectorAll(".parallax-layer").forEach(layer => {
    const speed = parseFloat(layer.dataset.speed) || 0;
    layer.style.transform = `translate3d(${deltaX * speed}px, ${deltaY * speed}px, 0)`;
  });
});