全屏滚动特效

jQuery Scrollify


www:http://projects.lukehaas.me/scrollify/#home
github:https://github.com/lukehaas/Scrollify


基本设置

Scrollify需要的jQuery1.6+。
大多数基本设置如下:

<! doctype html>
    <html>
        <head>
            <script>
                $(function() {
                    $.scrollify({
                        section : "section",
                    });
                });
            </script>
        </head>
        <body>
            <section></section>
            <section></section>
        </body>
    </html>

默认配置:

$.scrollify({
        section : "section",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        before:function() {},
        after:function() {},
        afterResize:function() {}
 });

选项

  • section:选择的部分。
  • sectionName:您可以定义每个部分的哈希值。这使得有可能以永久链接到特定的部分。这被设定为在各节的数据属性。数据属性的名称被定义sectionName定义。
  • easing:定义缓动方法。
  • offset:偏移的距离以像素为单位,以抵消由每个部分的位置。
  • scrollbars:滚动条一个布尔值来定义滚动条是否可见或不可见。
  • before:被称为前部分是通过移动方式滚动到一个回调。参数包括部分和全部部分元素的数组的索引。
  • after:在那之后被调用后一个新的部分滚动到一个回调。参数包括部分和全部部分元素的数组的索引。
  • afterResize:被称为窗口大小调整后的回调。

方法

$.scrollify.move("#name");
$.scrollify.instantMove("#name");
$.scrollify.next()
$.scrollify.previous()
$.scrollify.instantNext()
$.scrollify.instantPrevious()
$.scrollify.destroy()
$.scrollify.update()
$.scrollify.current()
$.scrollify.disable()
$.scrollify.enable()
$.scrollify.isDisabled()

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>