开发者社区> 秋天风景> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

  全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验。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 - 帮助你创建漂亮的全屏滚动效果

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【古月21讲】ROS入门系列(4)——参数使用与编程方法、坐标管理系统、tf坐标系广播与监听的编程实现、launch启动文件的使用方法
【古月21讲】ROS入门系列(4)——参数使用与编程方法、坐标管理系统、tf坐标系广播与监听的编程实现、launch启动文件的使用方法
31 0
SAP ABAP SICF服务和Java Servlet的比较
SAP ABAP SICF服务和Java Servlet的比较
37 0
SAP ABAP SICF服务和Java Servlet的比较
SAP ABAP SICF服务和Java Servlet的比较
56 0
Java创建数组的三种形式
Java创建数组的三种形式 测试类: package cn.wsyjlly.base; import java.util.Arrays; /** * @author wsyjlly * @create 2019.
948 0
使用java api 创建excel内容并发送邮件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26654727/article/details/83473968 文章目...
2606 0
SpringBoot+kafka+ELK分布式日志收集
快速搭建ELK完成日志收集
8909 0
如何在Java文件中创建以太坊帐户和通过web3j查询账目情况?
在web3j的文档中,我没有看到创建帐户和的web3j查询账目任何内容,我想知道这是否可行? 问题回答: 其实挺简单的,ethGetBalance方法将返回任何给定帐户的余额。
1995 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2393
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载