首页 > 代码库 > pagePiling.js - 创建漂亮的全屏滚动效果

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

2024-07-29 22:30:57   224人阅读

　　全屏滚动效果是最近非常流行的网页设计形式，带给用户良好的视觉和交互体验。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(){},    });});

　

您可能感兴趣的相关文章
  • Web 开发中很实用的10个效果【源码下载】
  • 精心挑选的优秀jQuery Ajax分页插件和教程
  • 12个让人惊叹的的创意的 404 错误页面设计
  • 让网站动起来！12款优秀的 jQuery 动画插件
  • 十分惊艳的8个 HTML5 & JavaScript 特效

 

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

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

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


联系
我们