鼠標滾動插件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();

完。