视差滚动

前端视差滚动

作者: 醉月思发布日期: 2020-02-18 分类: 学习笔记

做落地页时想加点「层次感」，视差滚动是常见选项：前景、背景移动速度不一致，眼睛会误以为是 3D 纵深，其实还是在 2D 平面上玩位移。

水平案例

下面是一个水平方向的视差滚动示意（图层不同步）：

读图时注意：各列元素横向移动速率不同，近处快、远处慢，就是视差的核心错觉。

常见实现方式

1. 监听 scroll，改 `transform`

最灵活。给多层元素设不同「速度系数」，在 scroll 事件里更新 translate：

window.addEventListener('scroll', () => {
  const y = window.scrollY
  layerBack.style.transform = `translateY(${y * 0.3}px)`
  layerFront.style.transform = `translateY(${y * 0.6}px)`
})

系数小于 1 像远景，大于 1 像贴脸。移动端记得节流或改用 IntersectionObserver，别每个像素都触发重排。

2. CSS `background-attachment: fixed`

背景图钉在视口，内容滚过它，适合简单全屏头图：

.hero {
  background-image: url(bg.jpg);
  background-attachment: fixed;
  background-size: cover;
}

实现快，但 iOS Safari 对 fixed 背景支持历史上很坑，上线前要真机测。

3. 专用库

页面层级多、要兼容各种浏览器时，rellax、simpleParallax 这类库省时间。小效果自己写两三行往往够用。

使用时要克制

视差很炫，也容易翻车：

动效太多会抢正文注意力
低端机 + 多层大图 = 掉帧
有晕动症的读者可能直接关页

我的习惯是：一处点睛即可，别全站都在飘。炫技之前先问一句：这层动效是在帮用户理解，还是纯装饰？

版权声明: 本文首发于指尖魔法屋-视差滚动（https://blog.thinkmoon.cn/post/443_%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8/）转载或引用必须申明原指尖魔法屋来源及源地址！