WOW.js和animate.css讓頁面滾動時顯示動畫

官網：http://mynameismatthieu.com/WOW/

bootstrap CDN服務：http://www.bootcdn.cn/wow/

1.wow.js

實現了在網頁滾動時的動畫效果，有漂亮的動畫效果，依賴於Animate.css。

2.Animate.css (下載https://daneden.github.io/animate.css/)
很是優秀的CSS3動畫庫，不依賴於jQuery，純CSS動畫


使用方法

一、引入文件
<link rel="stylesheet" href="css/animate.min.css">  


二、HTML
<div class="wow slideInLeft"></div>  
<div class="wow slideInRight"></div>  
能夠加入 data-wow-duration（動畫持續時間）和 data-wow-delay（動畫延遲時間）屬性，如：
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>  

<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>  

 

三、javascript

new WOW().init();  

 

若是須要自定義配置，可以下使用：
[javascript] view plain copy
var wow = new WOW({  
    boxClass: 'wow',  
    animateClass: 'animated',  
    offset: 0,  
    mobile: true,  
    live: true  
});  
wow.init();  


配置
屬性/方法 類型 默認值 說明
boxClass 字符串 ‘wow’ 須要執行動畫的元素的 class
animateClass 字符串 ‘animated’ animation.css 動畫的 class
offset 整數 0 距離可視區域多少開始執行動畫
mobile 布爾值 true 是否在移動設備上執行動畫
live 布爾值 true 異步加載的內容是否有效