Parallax Scrolling 纯CSS

一 原理

Parallax / 视差 的实现原理其实很简单，只是利用了物体的不同深度（depth）而已。因为背景中的物体比前景中的移动的更慢。
我们用transform-style: preserve-3d;定义当前透视方法为3D。非常容易理解：
    - 近大远小
    - 近快远慢

透视图

二 实现

当我们:

1. 将透视锁定在鼠标滚动的"图层"（一般用body） transform-style: preserve-3d;
2. 并在子元素上都标记transform-style: preserve-3d;时
3. 为子元素标上translateZ(0px / -5px / 5px) ===> 控制深度
4. 将所有对象都伪装成在同一平面上：我们上面说过，因为每个对象都不在同一个深度上，对象的大小会因为深度不同而被缩放 ===> 可以用CSS的scale() 来控制对象在屏幕上显示的大小
   ===> 注意，该属性不影响parallax scrolling的效果。只控制对象显示的大小（即缩放）
5. 为了保证某些元素被看见，我们可以使用z-index来改变堆叠顺序

然后，我们就可以看到Parallax的效果     >>>   YEAHHH

三 举例

HTML

CSS

html, body {
  width: 100%;  height: 100%;
  margin: 0;  padding: 0;
  overflow: hidden;
}

body {
  overflow: auto;
  perspective: 1px; 
  -webkit-perspective: 1px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

body * {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.container {
  height: 1280px;
  position: relative;
}

.main_pic {
  height: 800px;  left: 50%;
  position: absolute; 
  -webkit-transform: translate3D(-50%, -120px, -1px) scale(2);
  transform: translate3D(-50%, -120px, -1px) scale(2);
  z-index: 1000;
}

.pic {
  position: absolute;
}

.pic1 {
    top: 200px;   left: 200px;
    -webkit-transform: translateZ(-0.4px) scale(2);
    transform: translateZ(-0.4px) scale(2);
    z-index: -1;
}

.pic2 {
    top: 400px;   left: 1000px;
    -webkit-transform: translateZ(-0.4px) scale(3);
    transform: translateZ(-0.4px) scale(3);
    z-index: 0;
}

.pic3 {
    top: 500px;   left: 100px;
    -webkit-transform: translateX(-0.4px) scale(1);
    transform: translateX(-0.4px) scale(1);
    z-index: 1;
}

.pic4 {
    top: 800px;   left: 900px;
    -webkit-transform: translateX(2px) scale(2);
    transform: translateX(2px) scale(2);
    z-index: 1;
}

.pic5 {
    top: 900px;   left: 400px;
    -webkit-transform: translateX(-1px) scale(2);
    transform: translateX(-1px) scale(2);
    z-index: 1;
}

https://codepen.io/chuuuing/details/odNYVR/