pagePiling.js - 創(chuàng)建漂亮的全屏滾動效果
全屏滾動效果是最近非常流行的網(wǎng)頁設(shè)計形式,帶給用戶良好的視覺和交互體驗。pagePiling.js 這款 jQuery 插件可以幫助前端開發(fā)人員輕松實現(xiàn)這種效果。支持所有的主流瀏覽器,包括IE8+,支持移動設(shè)備。
HTML 代碼結(jié)構(gòu)示例:
<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>
參數(shù)配置示例:
$(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(){},
});
});
您可能感興趣的相關(guān)文章
作者:山邊小溪
主站:yyyweb.com 記住啦:)
歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處。



浙公網(wǎng)安備 33010602011771號