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

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

http://templune.com/

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

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


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


视觉差主要是运用到了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%;
}
【热门文章】
【热门文章】