纯 CSS 实现视差滚动

视差滚动效果在前几年就流行起来，最近 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 插件、加载速度快，缺点是兼容性一般。