jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js

当前位置:主页 > jQuery库 > 视觉差滚动效果 > jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js
jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js
分享:

    插件介绍

    OnePageScroll.js是一款带有背景视觉差效果的jQuery整页滚动特效插件。OnePageScroll.js能够滚动一次鼠标滚轮就使整个页面向上或向下翻动一页。并且在页面滚动时还带有一点视觉差效果。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-31
    阅读:
麦子学院
简要教程

OnePageScroll.js是一款十分好用的jQuery带视觉差的整个页面滚动特效插件。这个插件能够每次上下滚动一个页面,还带有视觉差效果,简单实用。

这个整页滚动插件会自动检测鼠标滚轮或鼠标手势(使用Eike的 jQuery Swipe Events )来决定向哪个方向滚动页面。当用户使用鼠标滚轮或手势是,插件将自动使用CSS3 transform 来使整个页面向上或向下滚动。

HTML结构

使用该整页滚动插件,首先要在页面中引入jquery和jquery.onepage.js以及onepage-scroll.css。

<body>
  ...
  <div class="main">
    <section>...</section>
    <section>...</section>
    ...
  </div>
  ...
</body>
                

JAVASCRIPT

通过下面的语句来调用该整页滚动插件。

$(document).ready(function() {
  ...
  $(".main").onepage_scroll({
     sectionContainer: "section", 
     easing: "ease",
     animationTime: 1000,
     pagination: true,
     updateURL: false
  });
  ...
});
                

下面介绍一些可用参数:

  • sectionContainer :如果你不想使用section来作为每个单页,可以使用该参数来改变它。该参数接收jQuery选择器,默认标签为section
  • easing :该参数用于确定页面在向上或向下滚动时的easing effect(缓动效果)。该参数接收所有的CSS3 easing选项,例如:linear, ease-in, ease-out, ease-in-out,你甚至可以使用cubic-bezier制作反弹效果。更多关于如何生成cubic-bezier的效果资料,请参考Ceaser。默认值为ease
  • animationTime :该参数用于设置每次执行动画的时间。单位毫秒,默认值为1000。
  • pagination :如果设置为true,将自动在屏幕的右边添加一个分页条。你可以通过CSS很容易的改变它的位置。设置为false移除分页条。默认值为true。
  • updateURL :该参数用于设置是否改变用户当前浏览的section的URL到指定的URL。如果你想让每个section都指向不同的URL设置该参数为true。默认值为false。

公共方法

该整页滚动插件可以通过编程的方式来触发页面的滚动,它提供了一些公共方法。

  • $.fn.moveUp()

    该方法使页面向上滚动一页。

    $(".main").moveUp();
                        
  • $.fn.moveDown()

    该方法使页面向下滚动一页。

    $(".main").moveDown();
                        

你可以在按钮上使用上面的公共方法来使页面整页上下滚动。

网友评论