css实现滚动视觉差效果

什么是视差滚动？

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果。

视差效果， 最初是一个天文术语。当我们看着繁星点点的天空时，较远的恒星运动较慢，而较近的恒星运动较快。当我们坐在车里看着窗外时，我们会有相同的感觉。远处的山脉似乎没有动，附近的稻田很快过去了。许多游戏使用视差效果来增加场景的三维度。说的简单点就是，滚动屏幕时，网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同，导致网页中产生分层元素的错觉。

实现方式

css 中主要有两种实现方式:

• background-attachment: fixed

• transform: translate3d

background-attachment: fixed

background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动

它一共有三个属性:

• fixed: 键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动, 而是相对可视窗口固定。
• local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。
• scroll: 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动。

下面我们使用 background-attachment: fixed 来实现视差滚动，看一下示例:

transform: translate3d

这里解释下使用transform: translate3d来实现视差滚动的原理:

1. 给容器设置上transform-style: preserve-3d和perspective: xpx，那么处于这个容器下的子元素就会处于 3D 空间中;

2. 给子元素分别设置不同的transform: translateZ()，这时不同子元素在 3D Z 轴方向距离屏幕的距离也就不一样;

3. 滚动滚动条，由于子元素设置了不同的transform: translateZ()，那么他们滚动的上下距离translateY相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。

总结下来就是: 父容器设置transform-style: preserve-3d和perspective: xpx，子元素设置不同的transform: translateZ()

注：这里我们用到了transform: translateZ() 负数，就是元素相对我们的视觉变远了，它就变小了，这时想要同等大小的话，我们就可以使用salce() 放大他， 就看起来一样， Z轴的距离就不一样了，这样滚动起来就有视觉差效果了

参考文章： 滚动视差让你不相信“眼见为实” (opens new window)