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

 

您可能感兴趣的相关文章

 

本文链接:pagePiling.js - 帮助你创建漂亮的全屏滚动效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

posted @ 2014-10-29 11:02 梦想天空(山边小溪) 阅读(...) 评论(...) 编辑 收藏