background-attachment
http://web.jobbole.com/95068/
以上效果主要使用background-attachment实现，该属性设置背景图像是否固定或者随着页面的其他部分滚动。来学习一下几个主要的取值：
1.local 表示背景相对于元素的内容固定，如果元素可滚动，则背景将会随着元素的内容滚动
2.scroll 表示背景相对于元素本身固定，如果元素可滚动，背景不随着内容滚动
3.fixed 表示背景相对于视口固定，如果元素可滚动，背景不随着元素的内容滚动
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;
}
image.png
transform: translate3d 实现滚动视差
1.我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中
2.再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样
3.滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。
关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开，默认读者都有所了解，还不是特别清楚的，可以先了解下 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);
}
}
image.png
