鼠标滚动插件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.          10pxor           10%.
moveY	string	none	Move the object along its Y axis e.g.          10pxor           10%.
moveZ	string	none	Move the object along its Z axis e.g.          10pxor           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.5or           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();

完。