jquery-smoove, 一个简单的jQuery插件,使用CSS3实现超级

分享于 

6分钟阅读

GitHub

  繁體 雙語
A simple jQuery plugin for super sexy scrolling effects using CSS3.
  • 源代码名称:jquery-smoove
  • 源代码网址:http://www.github.com/abeMedia/jquery-smoove
  • jquery-smoove源代码文档
  • jquery-smoove源代码下载
  • Git URL:
    git://www.github.com/abeMedia/jquery-smoove.git
    Git Clone代码到本地:
    git clone http://www.github.com/abeMedia/jquery-smoove
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/abeMedia/jquery-smoove
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    jQuery Smoove - 华丽的CSS3滚动效果

    Smoove可以很容易地实现令人吃惊的霓虹转换效果,使你的内容滑动到视图中。

    CDNJSBuild StatusDependency Status

    设置

    从CDN加载负载

    启动和运行的最简单方法是从 cdnjs 加载 jQuery Smoove。 请确保先加载 jQuery。

    <scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.10/jquery.smoove.min.js"></script>

    Bower 安装

    使用以下命令使用 Bower 命令安装 jQuery Smoove。

    
    $ bower install jquery-smoove
    
    
    
    

    或者简单地将 jquery-smoove 添加到项目的bower.json

    "dependencies": {
     "jquery-smoove": "latest" }

    下载

    你也可以下载最新的软件包。

    • 下载最新版本
    • 或者 curl -O https://raw.github.com/abeMedia/jquery-smoove/master/dist/jquery.smoove.js

    用法

    jQuery Smoove需要通过JavaScript激活。

    $('.foo').smoove(options);

    这将使用默认设置在 .foo 元素上启动 jQuery Smoove。 但是,可以通过数据属性在单个对象上重写选项,如下面的示例所示。

    <divclass="foo"></div>
    <divclass="bar"data-move-x="-200px"data></div>
    <scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.10/jquery.smoove.min.js"></script>
    <script>// Attach Smoove to elements and set default options$(".foo,. bar").smoove({ offset :'15%',// moveX is overridden to -200px for".bar" object moveX :'100px', moveY :'100px', });</script>

    同时请注意,当通过数据属性定义参数时,CamelCase名称会被用连字符 比如 moveX 分隔成 data-move-x

    命令行选项

    名称类型默认说明
    min_width整型768使用 LESS 像素宽度禁用屏幕上的smoove。
    min_height整型使用 LESS 像素高度禁用屏幕上的smoove。
    offset整数或者字符串150对象滑动到视图 比如 10% 之前到屏幕底部的距离。
    opacity整数( 0-100 )0对象在进入视图之前的不透明度。
    perspective整型1000以像素为单位的三维透视图。
    transformOrigin字符串50% 50%转换的原点,百分比或者关键字( 左,右,上或者下)。
    skewY角度沿y 轴 比如 90deg的二维偏移。
    move字符串沿X-和y 轴 比如 100px,50% 移动二维移动。
    move3d字符串沿 X-。Y-和z 轴 比如 10px,10px,10px的三维移动。
    moveX字符串将对象沿它的X 轴 比如 10px 或者 10% 移动。
    moveY字符串将对象沿它的Y 轴 比如 10px 或者 10% 移动。
    moveZ字符串将对象沿它的Z 轴 比如 10px 或者 10% 移动。
    rotate字符串二维旋转 比如 90deg
    rotate3d字符串沿 X-。Y-和z 轴 比如 1,1,1,90deg的三维旋转。
    rotateX字符串沿x 轴 比如 90deg的三维旋转。
    rotateY字符串沿y 轴 比如 90deg的三维旋转。
    rotateZ字符串沿z 轴 比如 90deg的三维旋转。
    scale十进制或者字符串X-和y 轴( x,y ) 上的二维缩放( 比如。 2.5 或者 2,0.5 )。
    scale3d字符串X-,Y-和z 轴( x,y,z ) 上的三维缩放( 比如。 2,3,0.5 )。
    scaleX十进制x 轴上的二维缩放。
    scaleY十进制y 轴上的二维缩放。
    skew角度沿X-和y 轴的二维偏移( 比如。 90deg,90deg )。
    skewX角度沿x 轴 比如 90deg的二维偏移。
    skewY角度沿y 轴 比如 90deg的二维偏移。

    演示

    访问媒体网页设计并向下滚动页面以查看插件。

    版权

    © 2014 2017 Adam Bouqdib http://abemedia.co.uk


    相关文章