pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验。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(){}, }); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。