鼠标滚动插件smoovejs和wowjs

前言

鼠标滚动特效很常见，当鼠标滚动到特定的位置时才会触发相应的CSS特效，这里简单聊两款鼠标滚动特效插件smoovejs和wowjs。

smoovejs

smoovejs基于jQuery，所以在引入smoovejs之前确保先引入jQuery，相关版本的smoovejs的cdn可以点击这里或者下面的链接查看。http://www.bootcdn.cn/jquery-smoove/激活smoovejs如下：

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

其中，添加滚动特效的方式有两种：

1. 在标签内使用data-*属性来添加
2. 在脚本中通过`$('.foo').smoove(option)`来添加

以div为例，对应的两种方法的关键代码如下：

1.<div class='foo' data-move-x='100px' data-move-y='100px'>data-*方法</div><script>
$('.foo').smoove({offset:'40%'});//在40%触发
</script>

2.<div class="foo">脚本触发</div><script>
$('.foo').smoove({
offset:'40%',
moveX:'100px',
moveY:'100px'
});
</script>

这里需要注意两点：
1. 使用`$('.foo').smoove(option)`的优先级要高于使用data-*的优先级。
2. 对于data属性要使用驼峰命名

上面的只是简单的移动效果，smoovejs还有其他效果选项，这里以表格形式列出，感兴趣的可自行尝试。

Name	Type	Default	Description
offset	integer or string	150	Distance to the bottom of the screen before object glides into view e.g. 10% .
opacity	integer (0-100)	0	The opacity of the object before it comes into view.
perspective	integer	1000	3D perspective in pixels.
transformOrigin	string	50% 50%	Origin of the transform in pixel, percentage or keyword (left, right, top or bottom).
skewY	angle	none	2D skew along Y-axis e.g. 90deg .
move	string	none	2D move along the X- and the Y-axis e.g. 100px,50% .
move3d	string	none	3D move along the X-, Y- and the Z-axis e.g. 10px,10px,10px .
moveX	string	none	Move the object along its X axis e.g. 10px or 10% .
moveY	string	none	Move the object along its Y axis e.g. 10px or 10% .
moveZ	string	none	Move the object along its Z axis e.g. 10px or 10% .
rotate	string	none	2D rotation e.g. 90deg .
rotate3d	string	none	3D rotation along X-, Y- and Z-axis e.g. 1,1,1,90deg .
rotateX	string	none	3D rotation along X-axis e.g. 90deg .
rotateY	string	none	3D rotation along Y-axis e.g. 90deg .
rotateZ	string	none	3D rotation along Z-axis e.g. 90deg .
scale	decimal or string	none	2D scale on X- and Y-axis (x,y) (e.g. 2.5 or 2,0.5 ).
scale3d	string	none	3D scale on X-, Y- and Z-axis (x,y,z) (e.g. 2,3,0.5 ).
scaleX	decimal	none	2D scale on X-axis.
scaleY	decimal	none	2D scale on Y-axis.
skew	angle	none	2D skew along X- and the Y-axis (e.g. 90deg,90deg ).
skewX	angle	none	2D skew along X-axis e.g. 90deg .
skewY	angle	none	2D skew along Y-axis e.g. 90deg .

wowjs

wowjs基于animatecss，animatecss是一款css3特效的集成，总共数十种（没有去数，想知道确切数字的可以自行去count~~~）css3特效，在使用的同时打开看看这些特效代码相信对我们有益无害。
相应版本的animatecss和wowjs的cdn可点击下方链接查看。
animatecss：http://www.bootcdn.cn/animate.css/
wowjs：http://www.bootcdn.cn/wow/
在需要滚动特效的元素上添加相应的class即可，如下：

<div class="wow rollIn">wowjs</div>

其中，wow是基础类。同时有3个data属性可以使用，

data-wow-duration

、

data-wow-delay

和

data-wow-iteration

，可根据需求自行添加。
然后在脚本中初始化wow对象即可，如下：

new WOW.init();

这里是使用默认配置，也可以根据需要修改默认配置，配置选项如下：

属性/方法	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

在1.1.0版本中，添加了一个callback属性。详细内容可以在上面给出的链接中查看相关版本的源代码进行查看。
修改配置通过字面量修改即可，如下：

var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true});
wow.init();

完。