用 Stellar.js 制作视差滚动效果

参考

http://doc.bropaul.com/Stellar.js/docs/

https://github.com/markdalgleish/stellar.js#download

http://segmentfault.com/a/1190000002566463#articleHeader2 这个更有用

html

单个元素选项中data-stellar-background-ratio比较常用。接受一个正整数的值，可以改变它被应用到元素的影响速度。例如，data-stellar-background-ratio="0.5"意味着改变速度为自然滚动速度的一半。如果想使这个属性值低于1，建议在样式表里设置background-attachment: fixed;。

<divclass="content"id="content3" data-stellar-background-ratio="0.5"></div>

css

background-attachment: fixed;

height：（比实际图片高度要小才有视差）

js,引入jQuery和stellar就可以应用stellar

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.stellar.js"></script>

启动效应。设置一些常用选项（这些也可以不写，因为有时写上反而不能用。做好css和引入好js即可）

$.stellar({

    horizontalScrolling: false,

    responsive: true

});

巴特西

用 Stellar.js 制作视差滚动效果

最新文章

热门文章