滚动视差动画和解决方法
滚动视差
滚动视差效果（Parallax Scrolling）是指让多层背景以不同的速度位移，形成立体的运动效果的视觉体验，在前端强交互的时代，更应该多考虑这种用户体验较好的动效～
实现方案
JS监听浏览器 scroll 事件，不断改变元素位置
background-attachment属性，将图片位置相对于视口固定
translateZ()修改元素的缩小比例，使得滚动速度出现差异
JS实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// html<div class="parallax"> <img src="./images/bc1.png" id="bc1" /> <img src="./images/bc2.png" id="bc2" /> <img src="./images/bc3.png" id="bc3" /> <img src="./images/bc4.png" id="bc4" /> <img src="./images/bc5.png" id="bc5" /> <img src="./images/tree.png" id="tree" /> <h2 id="text">Rolling Parallax</h2> <img src="./images/leaf.png" id="leaf" /> <img src="./images/plant.png" id="plant" /></div><div class="contentBox"> <h2>Parallax Scrolling</h2> <text class="content"> content... </text></div>//css@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Luckiest Guy", cursive;}body { background: #f9f9f9; min-height: 100vh; overflow-x: hidden;}.parallax { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh;}.parallax img { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none;}#text { position: absolute; font-size: 5em; color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); letter-spacing: 10px;}.contentBox { position: relative; background: #003329; padding: 100px;}.contentBox h2 { font-size: 36px; color: #fff; margin-bottom: 10px; letter-spacing: 2px;}.contentBox .content { font-size: 20px; color: #fff; font-weight: 300; line-height: 28px; letter-spacing: 2px;}//jslet text = document.getElementById("text");let leaf = document.getElementById("leaf");let bc1 = document.getElementById("bc1");let bc4 = document.getElementById("bc4");let bc5 = document.getElementById("bc5");window.addEventListener("scroll", () => { const value = window.scrollY; text.style.marginTop = value * 1.5 + "px"; leaf.style.top = value * -1.5 + "px"; leaf.style.left = value * 1.5 + "px"; bc1.style.top = value * 0.5 + "px"; bc4.style.left = value * -1.5 + "px"; bc5.style.left = value * 1.5 + "px";});预览效果如下
CSS-background-attachment
前置知识
首先 background-attachment 要和 background-image 一起使用才有意义，表示的是背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 有四个可选值：fixed，scroll，local，inherit。
scroll 是该属性的默认值，表示背景图相对于元素固定，简单理解就是两者绑定住了，所以元素滚动了图片也会跟着滚动。
local 表示背景图相对于元素内容固定，而相对于其他滚动条则会滚动。举例来说，假如元素内部设置了overflow：scroll，则元素内部会出现滚动条，此时滚动元素内部滚动条的时候，背景图会随着滚动而滚动。而如果我们设置 background-attachment：scroll ，则背景图会随着元素内部滚动而固定住。
fixed 表示背景图相对于视口固定，无论怎么滚动，元素都岿然不动，如果多个元素都设置了fixed，他们也只会在自己的元素内显示，互不影响。
inherit 只是指定 background-attachment 的设置从父元素继承。
