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

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

 

 

效果演示     插件下载

 

HTML 代码结构示例:

1
2
3
4
5
6
<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>

参数配置示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(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 @   梦想天空(山边小溪)  阅读(9938)  评论(4编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
历史上的今天:
2013-10-29 经典网页设计:20个与众不同的国外 HTML5 网站
2013-10-29 Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
2013-10-29 『摄影欣赏』25幅表达幸福情感的精美照片【组图】
2013-10-29 22套新鲜出炉的 Web & Mobile PSD 用户界面素材
2012-10-29 精美网站设计:25个以全屏照片为背景的网页作品
2012-10-29 【精心挑选】10款基于 jQuery 的图片360度旋转插件
2011-10-29 分享25个优秀的 HTML5 开发教程
点击右上角即可分享
微信分享提示