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

发布于 2019-12-26 20:28:06 字数 3181 浏览 1412 评论 0

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

pagePiling.js 是 jQuery 插件,用来创建一个漂亮的滚动帘类型的网站。pagePiling.js  非常灵活,兼容各种浏览器和触屏设备。用户可以使用这个插件来创建一个原始的滚动网站。

使用方法

<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="jquery.min.js"></script>
<script src="jquery.pagepiling.js"></script>

必要的 HTML 结构

每个部分包含与一个div定义类。活动部分默认情况下将成为第一个部分,这是作为主页。

<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:

$(document).ready(function() {
    $('#pagepiling').pagepiling();
});

完整参数

一个更复杂的初始化所有选项设置可以看起来像这样:

$(document).ready(function() {
    $('#pagepiling').pagePiling({
        menu: null,
        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(){},
    });
});

为了创建链接到特定的部分,你可以使用锚链接,但是在网页上 data-anchor 标签不能有相同的值作为ID。

导航菜单

菜单链接的活跃部分您将不得不使用菜单选项和利用锚的链接(#)选项部分如下解释。

选项

  • verticalcenter:(默认正确)垂直中心内的内容部分。
  • scrollingSpeed:700(默认)滚动转换速度以毫秒为单位。
  • sectionsColor:(默认没有)为每个部分定义CSS背景颜色属性的例子
$('#pagepiling').pagePiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

相关资源

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。