滾動視差動畫和解決方法
滾動視差
滾動視差效果（Parallax Scrolling）是指讓多層背景以不同的速度位移，形成立體的運(yùn)動效果的視覺體驗(yàn)，在前端強(qiáng)交互的時代，更應(yīng)該多考慮這種用戶體驗(yàn)較好的動效～
實(shí)現(xiàn)方案
JS監(jiān)聽瀏覽器 scroll 事件，不斷改變元素位置
background-attachment屬性，將圖片位置相對于視口固定
translateZ()修改元素的縮小比例，使得滾動速度出現(xiàn)差異
JS實(shí)現(xiàn)
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";});預(yù)覽效果如下
CSS-background-attachment
前置知識
首先?background-attachment?要和?background-image?一起使用才有意義，表示的是背景圖像是否固定或者隨著頁面的其余部分滾動。
background-attachment?有四個可選值：fixed，scroll，local，inherit。
scroll?是該屬性的默認(rèn)值，表示背景圖相對于元素固定，簡單理解就是兩者綁定住了，所以元素滾動了圖片也會跟著滾動。
local?表示背景圖相對于元素內(nèi)容固定，而相對于其他滾動條則會滾動。舉例來說，假如元素內(nèi)部設(shè)置了overflow：scroll，則元素內(nèi)部會出現(xiàn)滾動條，此時滾動元素內(nèi)部滾動條的時候，背景圖會隨著滾動而滾動。而如果我們設(shè)置 background-attachment：scroll ，則背景圖會隨著元素內(nèi)部滾動而固定住。
fixed?表示背景圖相對于視口固定，無論怎么滾動，元素都巋然不動，如果多個元素都設(shè)置了fixed，他們也只會在自己的元素內(nèi)顯示，互不影響。
inherit?只是指定 background-attachment 的設(shè)置從父元素繼承。
標(biāo)簽：
