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

CSS实现苹果官网视差滚动效果

2026-04-05 18:06:23 0浏览收藏

用 `scroll` 事件 + `transform: translateY()` 模拟视差，不是真“视差”

苹果官网那种丝滑滚动动画，本质是监听滚动位置，动态调整元素位移。它不依赖 CSS perspective 或 will-change，而是靠 JS 精确控制每个区块的 transform 偏移量。浏览器原生不支持“滚动触发视差”，所以必须手写逻辑。

常见错误现象：transform: translateZ() 搭配 perspective 被误认为能实现视差——它只影响 3D 变换层级，不随滚动变化；纯 CSS @keyframes 无法绑定滚动进度，只能做固定时长动画。

使用场景：首页大图区、产品介绍模块、分屏过渡段落
性能关键点：必须用 requestAnimationFrame 节流 scroll 回调，否则卡顿明显
兼容性注意：iOS Safari 对 transform 的渲染更敏感，避免同时操作 top 和 transform

`getBoundingClientRect().top` 是计算滚动偏移的核心依据

判断一个元素是否进入/离开视口，不能只看 window.scrollY，得结合元素自身位置。最稳定的方式是每次滚动时读取目标元素的 getBoundingClientRect().top，它返回的是该元素上边缘距离视口顶部的距离（负值表示已滚过，正值表示还没到）。

容易踩的坑：offsetTop 会受父级 position 影响，且不响应滚动；scrollTop 在不同容器里含义混乱，全页滚动应统一用 window.scrollY 配合 getBoundingClientRect。

参数差异：getBoundingClientRect() 返回值单位是像素，且是只读对象，需每次调用获取最新值
推荐写法：const progress = 1 - (elRect.top / window.innerHeight)，得到 0～2 范围的“可视进度”
别在 scroll 里直接改 style.left——强制重排，一律走 transform

用 `transform: translateY()` 控制视差强度，别碰 `margin` 或 `top`

视差感来自不同层以不同速度移动。比如背景图慢速上移，前景文字快速上移。所有位移都必须用 transform: translateY() 实现，这是唯一被 GPU 加速、不影响布局、且可被浏览器优化的方案。

错误示范：margin-top: -50px 或 top: -50px 会触发 layout → paint → composite 全流程，滚动时掉帧严重。

强度控制：背景层用 translateY(progress * -20px)，内容层用 translateY(progress * -80px)
不要用百分比单位：translateY(-20%) 在滚动中表现不稳定，始终用 px
iOS 上若出现闪烁，加 transform: translateZ(0) 强制硬件加速（但别滥用）

防抖和节流不是可选项，是滚动动画的生死线

没加节流的 scroll 监听，在 Chrome 滚动一次可能触发 60+ 次回调；Safari 更狠。不做处理，JS 主线程直接卡死，动画变成幻灯片。

真实项目里，90% 的“视差卡顿”问题都出在这儿，而不是算法或 CSS 写错了。

必须用 requestAnimationFrame 包裹更新逻辑，不是 setTimeout 或 Lodash debounce

示例结构：

let ticking = false;
function updateParallax() {
  // 更新所有元素 transform
  ticking = false;
}
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(updateParallax);
    ticking = true;
  }
});

别在 updateParallax 里查 DOM——提前缓存 document.querySelectorAll('.parallax-layer')

苹果官网的视差效果看似复杂，其实核心就三件事：用 getBoundingClientRect 算位置、用 transform: translateY 做位移、用 requestAnimationFrame 控节奏。最容易被忽略的是第三点——很多人写了前两步，一上线就卡，然后回头去调 CSS 层叠顺序或 z-index，结果白忙活。

好了，本文到此结束，带大家了解了《CSS实现苹果官网视差滚动效果》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！