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

 

可选参数：

名称	类型	默认值	描述
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倾斜。

转载于:https://www.cnblogs.com/moretry/p/4807558.html