1. 引入包
- <script src="js/jquery.min.js"></script>
- <script src="js/jquery.stellar.js"></script>
2. 设置
设置视差元素的随页面滚动的速率
data-stellar-background-ratio="0.3" // 数值越大滚动越快
凡是需要做视差滚动的都需要加上样式
background-attachment: fixed;
3. 初始化
- $(function () {
- $.stellar({
- horizontalScrolling: false,
- verticalScrolling: true,
- });
- });
- ==============================================================
- $.stellar({
- // 设置滚动的方向是 "竖直方向" 还是 "水平方向", 或者两个方向都有
- horizontalScrolling: true, // 默认水平方向开启滚动
- verticalScrolling: true, // 默认竖直方向开启滚动
- // 设置全局偏移
- horizontalOffset: 0, // 默认水平偏移为 0
- verticalOffset: 0, // 默认竖直偏移为 0
- // 窗口加载完毕或者改变大小时是否刷新滚动元素
- responsive: false, // 默认不刷新
- // 设置滚动方式
- // 可以选择'scroll', 'position', 'margin' 或者'transform'
- // 或者 使用自己定义的'scrollProperty' 插件.
- scrollProperty: 'scroll', // 默认为'scroll'
- // 设置定位方式
- // 可以选择'position' 或者'transform'
- // 或者 使用自己定义的'positionProperty' 插件.
- positionProperty: 'position', // 默认为'position'
- // 设置两种滚动效果的开关
- parallaxBackgrounds: true, // 默认开启背景滚动
- parallaxElements: true, // 默认开启元素滚动
- // 滚动元素滚动到视口 (viewport) 以外时是否隐藏
- hideDistantElements: true, // 默认为隐藏
- // 自定义元素如何出现和消失
- hideElement: function($elem) { $elem.hide(); },
- showElement: function($elem) { $elem.show(); }
- });
来源: http://www.bubuko.com/infodetail-2732711.html