視差滾動(dòng)效果在前幾年就流行起來，最近 tag Design 的新作品折扇 App 也有所運(yùn)用肿孵。在介紹折扇歷史的時(shí)候唠粥，滑動(dòng)長(zhǎng)軸畫卷，元素的移動(dòng)有快有慢停做，創(chuàng)造了景深的效果晤愧。
折扇 App
可以嘗試用 CSS 3 的 perspective 屬性，在網(wǎng)頁(yè)簡(jiǎn)單實(shí)現(xiàn)這種效果蛉腌。
首先讓滾動(dòng)發(fā)生在父元素的內(nèi)部官份，并給父元素加上 perspective: 1px，讓父元素獲得三維的觀察視角烙丛。
.container {
width: 100vw;
height: 100vh;
overflow-x: auto;
overflow-y: hidden;
perspective: 1px;
}
然后再給不同元素分別加上不同的 transform 屬性舅巷，translateZ 值調(diào)節(jié)元素在 Z 軸的位置（近大遠(yuǎn)小）河咽，同時(shí)配合 scale 值讓元素的大小看起來和原來無異钠右。那么就實(shí)現(xiàn)了滾動(dòng)過程中，不同元素看起來的運(yùn)動(dòng)速度不同忘蟹。
.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 的視差滾動(dòng)實(shí)現(xiàn)飒房，優(yōu)點(diǎn)是不需要 JS 插件、加載速度快媚值，缺點(diǎn)是兼容性一般情屹。
