background-attachment
http://web.jobbole.com/95068/
以上效果主要使用background-attachment實(shí)現(xiàn)玖绿，該屬性設(shè)置背景圖像是否固定或者隨著頁(yè)面的其他部分滾動(dòng)。來(lái)學(xué)習(xí)一下幾個(gè)主要的取值：
1.local 表示背景相對(duì)于元素的內(nèi)容固定，如果元素可滾動(dòng)琉历，則背景將會(huì)隨著元素的內(nèi)容滾動(dòng)
2.scroll 表示背景相對(duì)于元素本身固定，如果元素可滾動(dòng)毒嫡，背景不隨著內(nèi)容滾動(dòng)
3.fixed 表示背景相對(duì)于視口固定观腊，如果元素可滾動(dòng)，背景不隨著元素的內(nèi)容滾動(dòng)
HTML 代碼如下：
<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
transform: translate3d 實(shí)現(xiàn)滾動(dòng)視差
1.我們給容器設(shè)置上 transform-style: preserve-3d 和 perspective: xpx浙垫，那么處于這個(gè)容器的子元素就將位于3D空間中
2.再給子元素設(shè)置不同的 transform: translateZ()刨仑，這個(gè)時(shí)候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣
3.滾動(dòng)滾動(dòng)條绞呈，由于子元素設(shè)置了不同的 transform: translateZ()贸人，那么他們滾動(dòng)的上下距離 translateY 相對(duì)屏幕（我們的眼睛），也是不一樣的佃声，這就達(dá)到了滾動(dòng)視差的效果艺智。
關(guān)于 transform-style: preserve-3d 以及 perspective 本文不做過(guò)多篇幅展開(kāi)，默認(rèn)讀者都有所了解圾亏，還不是特別清楚的十拣，可以先了解下 CSS 3D。
<div class="g-container">
<div class="section-one">translateZ(-1)</div>
<div class="section-two">translateZ(-2)</div>
<div class="section-three">translateZ(-3)</div>
</div>
html {
height: 100%;
overflow: hidden;
}
body {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.g-container {
height: 150%;
.section-one {
transform: translateZ(-1px);
}
.section-two {
transform: translateZ(-2px);
}
.section-three {
transform: translateZ(-3px);
}
}
