视差滚动效果在前几年就流行起来，最近 tag Design 的新作品折扇 App 也有所运用。在介绍折扇历史的时候，滑动长轴画卷，元素的移动有快有慢，创造了景深的效果。
折扇 App
可以尝试用 CSS 3 的 perspective 属性，在网页简单实现这种效果。
首先让滚动发生在父元素的内部，并给父元素加上 perspective: 1px，让父元素获得三维的观察视角。
.container {
width: 100vw;
height: 100vh;
overflow-x: auto;
overflow-y: hidden;
perspective: 1px;
}
然后再给不同元素分别加上不同的 transform 属性，translateZ 值调节元素在 Z 轴的位置（近大远小），同时配合 scale 值让元素的大小看起来和原来无异。那么就实现了滚动过程中，不同元素看起来的运动速度不同。
.img-1 {
transform: translateZ(-1px) scale(2); //变慢两倍
}
.img-2 {
transform: translateZ(-2px) scale(3); //变慢三倍
}
.text-1 {
transform: translateZ(0.5px) scale(0.5); //变快两倍
}
demo1
纯 CSS 的视差滚动实现，优点是不需要 JS 插件、加载速度快，缺点是兼容性一般。
