首页 > Web开发 > 详细

pagePiling.js - 创建漂亮的全屏滚动效果

时间:2014-10-29 12:21:38      阅读:255      评论:0      收藏:0      [点我收藏+]

  全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器,包括IE8+,支持移动设备。

 

bubuko.com,布布扣

 

效果演示     插件下载

 

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 - 帮助你创建漂亮的全屏滚动效果

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

pagePiling.js - 创建漂亮的全屏滚动效果

原文:http://www.cnblogs.com/lhb25/p/create-an-original-scrolling-site.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!