视差效果
知有
201
视差效果
所谓的视差效果，就是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
我们要实现视差效果，首先要了解一个属性background-attachment：
它的属性有
- scroll：默认值，背景图像会随着页面其余部分的滚动而移动。
- fixed：当页面的其余部分滚动时，背景图像不会移动。
- inherit：继承父元素background-attachment属性的值。
完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动。
还有一种方法就是使用transform:translate3D：
在使用前要先了解两个属性：
- transform，可以对元素进行变换(2d/3d)，包括平移 （translate)，旋转 （rotate），缩放 （scale）等。
- perspective，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果。
- 设置容器 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中。
- 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D的 Z轴方向距离屏幕（我们的眼睛）的距离也就不一样了。
- 我们就以及实现了效果，接着我们滚动滚动条，由于我们给子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。
