帮酷LOGO
  • 显示原文与译文双语对照的内容
Parallax scrolling jQuery plugin

  • 源代码名称:paroller.js
  • 源代码网址:http://www.github.com/tgomilar/paroller.js
  • paroller.js源代码文档
  • paroller.js源代码下载
  • Git URL:
    git://www.github.com/tgomilar/paroller.js.git
  • Git Clone代码到本地:
    git clone http://www.github.com/tgomilar/paroller.js
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/tgomilar/paroller.js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • paroller.js

    npm

    支持视差滚动效果的轻量级jQuery插件

    • 可以在具有 background 属性或者任何其他元素的元素上使用它
    • 滚动元素可以移动: 垂直,水平
    • 通过 html data-*属性或者jQuery选项操作
    • 移动就绪
    • 易于使用

    演示:示例页面Alveus

    安装

    在关闭 </body> 元素之前:

    $ npm install paroller.js
    Bower
    $ bower install paroller.js
    $ yarn add paroller.js

    使用

    // initialize paroller.js $('.my-paroller').paroller();// initialize paroller.js and set attributes $("#my-element").paroller({ factor:'0.5', type:'foreground', direction:'horizontal' });
    <!-- select element --><divclass="my-paroller"data-paroller-factor="0.3"data-paroller-type="foreground"data-paroller-direction="horizontal"></div> 
    <divid="my-element"></div>

    和 browserify

    require('paroller.js');

    命令行选项

    数据属性

    你可以通过设置data-paroller-*值属性或者设置JavaScript选项来控制滚动视差效果。

    data-paroller-factor 设置元素效果的视差和距离对滚动的影响。

    data-*值默认值
    data-paroller-factor设置偏移和速度。它可以是正(-0.3 ) 或者负( -0.3 ) 。 减少意味着较慢。0
    data-paroller-type背景,前景背景
    data-paroller-direction垂直,水平竖直

    JavaScript

    // initialize paroller.js and set attributes for selected elements$(".paroller, [data-paroller-factor]").paroller({
     factor:0.3, // multiplier for scrolling speed and offset, +- values for direction control type:'foreground', // background, foreground direction:'horizontal'// vertical, horizontal});
     

    许可证

    MIT




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语