滚动视差css

background-attachment

http://web.jobbole.com/95068/
以上效果主要使用background-attachment实现，该属性设置背景图像是否固定或者随着页面的其他部分滚动。来学习一下几个主要的取值：
1.local 表示背景相对于元素的内容固定，如果元素可滚动，则背景将会随着元素的内容滚动
2.scroll 表示背景相对于元素本身固定，如果元素可滚动，背景不随着内容滚动
3.fixed 表示背景相对于视口固定，如果元素可滚动，背景不随着元素的内容滚动

HTML 代码如下：
IMG1
IMG2
IMG3
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。

    
translateZ(-1)
    
translateZ(-2)
    
translateZ(-3)

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);
    }
}

总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，效果如下：

image.png