用 Intersection Observer + CSS Houdini 实现更丝滑的滚动视差动画

ErpanOmer
386 阅读4分钟

在如今用户体验越来越“挑剔”的前端世界里，**滚动视差（Parallax Scrolling）**已经成为提升页面沉浸感和高级感的标配。而过去我们实现视差动画时，往往借助于 scroll 事件 + JavaScript 不断计算偏移。但这不仅不优雅，甚至会让性能陷入困境。

今天，我们来探索一个更现代、更高效的做法：用 Intersection Observer + CSS Houdini 实现视差动画，不仅性能更佳，还能把逻辑从 JavaScript 拆分到 CSS 中，让架构更清晰。

背景知识

要讲清楚这个方案，得先回顾下我们将用到的两大工具：

1. Intersection Observer

这是一种浏览器原生提供的异步监听元素可见性变化的 API。相比传统的 scroll 监听，它不会每帧都触发 callback，而是在真正进入或离开视口时才触发，大大节省资源。

而且它还能告诉你：当前元素进入视口的比例，这在滚动动画中非常重要。

2. CSS Houdini

这是前端界最容易被误解的新技术之一。它的本质是：允许开发者扩展 CSS 的渲染机制，让你可以自己编写 CSS 的工作原理。例如：

  • 自定义属性行为（Properties & Values API）
  • 自定义绘制（Paint API）
  • 自定义布局（Layout API）

而我们在这篇文章中，会用到 Paint Worklet 来绘制一个响应滚动的动画背景。

最终目标

实现一个组件：在用户滚动过程中，某些背景图层根据滚动距离以不同速度“浮动”，创造出类似 3D 效果的滚动视差动画。

示意图（假设页面存在多层背景）：

[背景层1] ← 慢速移动  
[背景层2] ← 中速移动  
[前景内容] ← 正常滚动

思路设计

拆分任务

我们将视差动画分成两个部分：

  1. 追踪用户滚动：使用 Intersection Observer 获取每个内容块进入视口的百分比。
  2. 传递这个百分比到 CSS，交由 CSS Houdini 的 Paint Worklet 进行绘制。

如此一来，JavaScript 只管「数据计算」，CSS 管「视觉渲染」，职责划分清晰。

实现步骤

1. 注册 CSS Houdini 的 Paint Worklet

if (CSS.paintWorklet) {
  CSS.paintWorklet.addModule('/parallax-paint.js');
}

在 parallax-paint.js 中我们编写绘图逻辑：

registerPaint('parallax-bg', class {
  static get inputProperties() {
    return ['--scroll-ratio', '--parallax-depth'];
  }

  paint(ctx, size, properties) {
    const ratio = parseFloat(properties.get('--scroll-ratio')) || 0;
    const depth = parseFloat(properties.get('--parallax-depth')) || 1;

    const offset = ratio * depth * 50; // 控制移动幅度

    ctx.fillStyle = '#a0c4ff';
    ctx.fillRect(0, offset, size.width, size.height);
  }
});

2. 设置 CSS 使用 paint()

.parallax-layer {
  background: paint(parallax-bg);
  --scroll-ratio: 0;
  --parallax-depth: 1.5;
}

3. 使用 Intersection Observer 动态更新属性值

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const ratio = entry.intersectionRatio;
    entry.target.style.setProperty('--scroll-ratio', ratio);
  });
}, {
  threshold: Array.from({ length: 100 }, (_, i) => i / 100)
});

document.querySelectorAll('.parallax-layer').forEach(el => {
  observer.observe(el);
});

这样，我们就可以根据滚动进入的百分比，动态调整 CSS 自定义属性，让 Paint Worklet 进行响应式绘图。

冷知识补充

  • 为什么不直接用 scrollY？

    因为 scrollY 是全局的、会在每一帧触发，而 Intersection Observer 是“懒惰型”的 —— 只在元素真正变化时才会调用，尤其适合移动端节能。

  • Paint Worklet 并非运行在主线程

    它运行在浏览器的 CSS Painting Pipeline 中，是浏览器内部的线程机制，比 DOM 操作更接近 GPU，效率极高（但也不能读写 DOM）。

  • 为何需要 threshold: [0, 0.01, ..., 1]？

    默认的 Intersection Observer 只在“进入”和“离开”时触发。但我们想追踪滚动的全过程，所以我们人为制造了 100 个触发点。

性能对比

我们来对比两种实现方式的渲染性能：

方式操作频率是否卡顿GPU 使用电量消耗
scroll + requestAnimationFrame每帧偶发卡顿高高
IntersectionObserver + Houdini仅在滚动段变更时几乎无卡顿中低

可以看到，新方案在移动端、电商首页、H5页面中，几乎都是最优解。

实际案例应用

在以下实际项目中，我们用类似方案取得了更好的用户体验：

  • 某品牌宣传页的滚动背景图层浮动效果
  • 某游戏页在人物介绍时人物动态入场
  • 自定义图表区域的滚动驱动高亮动画

而且由于 Paint Worklet 可独立运行，这些组件也更容易被封装为“低耦合组件”。

潜在限制和应对策略

  • 兼容性：CSS Houdini 在部分低端安卓浏览器上仍不支持（但 Chrome 60+ 和 Safari 16+ 已稳定支持）。

    解决方案：使用 @supports (background: paint(foo)) 来优雅降级为静态背景。

  • 复杂性上升：Paint Worklet 中无法访问 DOM，仅能做纯绘图。

    建议：将 DOM 操作与绘图逻辑彻底分离，设计良好 API 接口，保持职责清晰。

总结

在性能和体验被越来越多用户关注的今天，“写出能跑满 60fps 的动画”已经不再是奢望，而是前端开发者的基本能力要求。通过组合使用 Intersection Observer 与 CSS Houdini，我们找到了一个低资源消耗 + 高体验回馈的解决方案。

如果说传统滚动动画是“轮子压地”，那么这个方案就是“磁悬浮”——轻盈而平滑。

延伸阅读

avatar
文章
阅读
粉丝