stellar.js 视差滚动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

});