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

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

插件介绍: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

可选参数:名称

类型

默认值

描述

offset

integer or string

150

当对象滑动进入屏幕之前距离屏幕底部的距离,例如:10%。

opacity

integer (0-100)

0

当对象滑动进入屏幕之前的透明度。

perspective

integer

1000

对象的3D perspective,单位像素。

transformOrigin

string

50% 50%

对象transform的Origin,单位像素、百分比或默认关键字(left, right, top or bottom)

skewY

angle

none

沿Y轴的2D倾斜度。

move

string

none

沿X轴和Y轴2D移动的距离,例如:100px,50%。

move3d

string

none

沿X轴、Y轴和Z轴3D移动的距离,例如:10px,10px,10px。

moveX

string

none

沿X轴移动对象,例如:10px or 10%

moveY

string

none

沿Y轴移动对象,例如:10px or 10%

moveZ

string

none

沿Z轴移动对象,例如:10px or 10%

rotate

string

none

2D旋转,例如:90deg

rotate3d

string

none

沿X轴、Y轴和Z轴的3D旋转,例如:1,1,1,90deg

rotateX

string

none

沿X轴的3D旋转,例如:90deg

rotateY

string

none

沿Y轴的3D旋转,例如:90deg

rotateZ

string

none

沿Z轴的3D旋转,例如:90deg

scale

decimal or string

none

X轴和Y轴方向上的2D缩放 (x,y),例如2.5或2,0.5

scale3d

string

none

沿X轴、Y轴和Z轴方向上的3D缩放 (x,y,z),例如:2,3,0.5

scaleX

decimal

none

X轴方向上的缩放。

scaleY

decimal

none

Y轴方向上的缩放。

skew

angle

none

沿X轴和Y轴方向上的2D倾斜,例如:90deg,90deg

skewX

angle

none

沿X轴方向上的2D倾斜。

skewY

angle

none

沿Y轴方向上的2D倾斜。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航