如何用CSS动画模拟视差滚动效果 CSS动画结合transform位移视觉层次-css教程-PHP中文网

如何用CSS动画模拟视差滚动效果 CSS动画结合transform位移视觉层次

雪夜

发布： 2025-08-01 16:35:01

原创

853人浏览过

<p>视差滚动效果的核心原理是不同图层以不同速度移动，从而产生深度感。1. 通过设置html结构中的多个图层并赋予data-speed属性来定义移动速率；2. 利用css的transform: translate3d()结合calc(var(--scroll-y) * speed)实现各图层基于滚动位置的位移；3. 使用javascript将页面滚动偏移量window.pageyoffset赋值给css变量--scroll-y以驱动动画；4. 通过使用translate3d开启gpu硬件加速、添加will-change: transform提示浏览器优化、对图片资源进行压缩、采用节流函数控制滚动事件频率等手段提升性能；5. 可扩展实现水平或双向视差滚动，并结合鼠标移动事件动态调整图层位置以增强交互性，最终在保证流畅性的前提下创造出丰富的视觉层次效果。</p>

如何用CSS动画模拟视差滚动效果 CSS动画结合transform位移视觉层次

CSS动画和transform属性是实现视差滚动效果的强大工具。它们允许我们创建深度感，而无需复杂的JavaScript。简单来说，通过调整不同层元素的移动速度，模拟远近不同的视觉效果，从而实现视差滚动。

使用CSS动画和transform位移来模拟视差滚动效果。

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

视差滚动的核心在于不同图层以不同的速度移动。通常，背景图层移动速度慢于前景图层，从而产生深度感。这可以通过CSS的

transform: translate()

登录后复制

属性和动画来实现。想象一下，你在火车上，近处的树木飞速掠过，远处的山脉却移动缓慢，这就是视差。

立即学习“前端免费学习笔记（深入）”；

首先，我们需要设置HTML结构。假设我们有几个

div

登录后复制

，每个

div

登录后复制

代表一个图层：

<div class="parallax-container">
  <div class="parallax-layer" data-speed="0.2">背景层</div>
  <div class="parallax-layer" data-speed="0.5">中间层</div>
  <div class="parallax-layer" data-speed="0.8">前景层</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变量。

燕雀Logo
为用户提供LOGO免费设计在线生成服务

101

查看详情
使用
```
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)`;
  });
});

登录后复制