Notepad++Good Luck To You!

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

插件介绍:

  jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件。该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转、翻转、放大缩小等动画特效。使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果。

 

基本用法

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

上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove。

你可以通过data-attributes属性来覆盖插件的默认参数,例如下面的例子:

<div class="foo"></div>
<div class="bar" data-move-x="-200px" data></div>
 
<script src“/jquery/jquery.min.js"></script>
<script src="/libs/jquery.smoove.min.js"></script>               
<script>  // 覆盖smoove的默认参数
  $(".foo, .bar").smoove({
    offset  : '15%',    // moveX is 覆盖 ".bar" 的 -200px 
    moveX   : '100px',
    moveY   : '100px',
  });</script>

注意:在使用 data-attributes 属性时,要将属性的驼峰格式改为连字符格式,例如:moveX要改为data-move-x

 

可选参数:

名称类型默认值描述
offsetinteger or string150当对象滑动进入屏幕之前距离屏幕底部的距离,例如:10%。
opacityinteger (0-100)0当对象滑动进入屏幕之前的透明度。
perspectiveinteger1000对象的3D perspective,单位像素。
transformOriginstring50% 50%对象transformOrigin,单位像素、百分比或默认关键字(left, right, top or bottom)
skewYanglenone沿Y轴的2D倾斜度。
movestringnone沿X轴和Y轴2D移动的距离,例如:100px,50%
move3dstringnone沿X轴、Y轴和Z轴3D移动的距离,例如:10px,10px,10px
moveXstringnone沿X轴移动对象,例如:10px or 10%
moveYstringnone沿Y轴移动对象,例如:10px or 10%
moveZstringnone沿Z轴移动对象,例如:10px or 10%
rotatestringnone2D旋转,例如:90deg
rotate3dstringnone沿X轴、Y轴和Z轴的3D旋转,例如:1,1,1,90deg
rotateXstringnone沿X轴的3D旋转,例如:90deg
rotateYstringnone沿Y轴的3D旋转,例如:90deg
rotateZstringnone沿Z轴的3D旋转,例如:90deg
scaledecimal or stringnoneX轴和Y轴方向上的2D缩放 (x,y),例如2.52,0.5
scale3dstringnone沿X轴、Y轴和Z轴方向上的3D缩放 (x,y,z),例如:2,3,0.5
scaleXdecimalnoneX轴方向上的缩放。
scaleYdecimalnoneY轴方向上的缩放。
skewanglenone沿X轴和Y轴方向上的2D倾斜,例如:90deg,90deg
skewXanglenone沿X轴方向上的2D倾斜。
skewYanglenone沿Y轴方向上的2D倾斜。


«    2023年7月    »
12
3456789
10111213141516
17181920212223
24252627282930
31
TOP 搜索
TOP 控制面板
您好,欢迎到访网站!
  查看权限
TOP 最新留言
    TOP 作者列表
    TOP 站点信息
    • 文章总数:163
    • 页面总数:0
    • 分类总数:6
    • 标签总数:20
    • 评论总数:0
    • 浏览总数:312004
    召唤伊斯特瓦尔