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

stellar.js 視差滾動