全屏滾動效果是最近非常流行的網頁設計形式，帶給用戶良好的視覺和交互體驗。pagePiling.js 這款 jQuery 插件可以幫助前端開發人員輕松實現這種效果。支持所有的主流瀏覽器，包括IE8+，支持移動設備。
HTML 代碼結構示例：
<div id="pagepiling">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
參數配置示例：
$(document).ready(function() {
$('#pagepiling').pagePiling({
menu: null,
direction: 'vertical',
verticalCentered: true,
sectionsColor: [],
anchors: [],
scrollingSpeed: 700,
easing: 'swing',
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
'textColor': '#000',
'bulletsColor': '#000',
'position': 'right',
'tooltips': ['section1', 'section2', 'section3', 'section4']
},
normalScrollElements: null,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
});
});
您可能感興趣的相關文章