这个banner上的视差滚动是怎样实现的。

Question

http://templune.com/

主要是我知道视差滚动这个概念，但我不知道视差滚动该怎么实现。

我觉得这个网页上的banner上的滚动效果是比较常见的滚动效果了，但是我不是很会，我想知道这样的滚动效果怎么实现。

Answer 1

有这样的工具可以帮你，parallax.js，有兴趣看看人家源码什么都知道了^^

Answer 2

视觉差主要是运用到了css3的属性，background-attachment: fixed;background-size: 100%;background-size: cover;(不懂的话自行百度这几个属性)代码如下：
<div class="mian">
</div>
样式：
.main{

overflow: hidden;
height: 360px;
width: 100%;
background: #fff url(../img/indexB1.png) no-repeat center top;
background-attachment: fixed;
background-size: 100%;
background-size: cover;
max-width: 100%;
}