视差滚动：入门 - Githubissues

概述

parallax，视差设计。即利用多层次不同速率的用户界面营造一种视觉暂留的错觉，呈现出相比单层次页面更加丰富动态的视觉感受。

parallax 主要两种技术模式。

固定背景图片例子：
- https://www.beckett.design/
- https://www.jqueryscript.net/demo/jQuery-Fullscreen-Vertical-Slider-with-Parallax-Effect/
- http://www.feedmusic.com
- https://www.hellomonday.com/home
- https://www.exsus.com/highway-one-roadtrip/ 原理：固定背景图片，使得滚动页面时背景相对于容器不动，而背景之上的内容相对背景运动，产生视差效果。使用到的 css 特性：
```
background-attachment: fixed;
```
设置元素深度例子：https://www.jqueryscript.net/demo/Simple-Parallax-Scrolling-Plugin-For-jQuery-scrolly/demo/ 原理：给页面元素设置不同的深度，即 3 维空间上 z 轴的数值。数值越大，距离人眼的越近，数值越小，距离人眼越远。移动同样的距离，距离较近的元素视觉上位移更大，具体较远的元素视觉上位移更小。由此模拟出元素们的速度差异。

使用到的 css 特性有：

perspective: 1px; 
transform-style: preserve-3d;
transform: translateZ(1px);