前言

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

smoovejs

smoovejs基于jQuery，所以在引入smoovejs之前确保先引入jQuery，相关版本的smoovejs的cdn可以点击或者下面的链接查看。

激活smoovejs如下：

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

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

1. 在标签内使用data-*属性来添加2. 在脚本中通过`$('.foo').smoove(option)`来添加以div为例，对应的两种方法的关键代码如下：
1.
     
      data-*方法
      2.
      
       脚本触发

这里需要注意两点：

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：

wowjs：

在需要滚动特效的元素上添加相应的class即可，如下：

     
      wowjs

其中，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();

完。