WOW.js——在頁面滾動時展現動感的元素動畫效果

插件描述：WOW.js 是一款可以實現滾動頁面時觸發CSS 動畫效果的插件，動態效果可以使網站顯示更有動感。

當頁面在向下滾動的時候，使用WOW.js可以讓頁面元素產生細小的動畫效果，從而引起瀏覽者注意力。

WOW官網：https://www.delac.io/wow/docs.html

使用教程

1.WOW.js 依賴 animate.css。

可以通過更改設置鏈接到另一個CSS動畫庫，在 head內引入animate.css或者animate.min.css。

 

 <link rel="stylesheet" type="text/css" href="css/animate.css" />

2.引入wow.js或者wow.min.js，然后js文件里再寫入代碼

 

 

<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>

如果需要自定義配置，可如下使用：

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

3.在塊狀元素內添加相應的class類名就能實現相應的動畫

data-wow-duration: 動畫持續時間
data-wow-delay: 動畫延遲時間
data-wow-offset: 元素的位置露出后距離底部多少像素執行
data-wow-iteration: 動畫執行次數

這四個屬性可選可不選。

例子：
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"> </section>
<!-- slideInLeft說明了動畫的樣式，是從左邊滑動出來的 -->

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

可以在以下網址中參考動畫樣式https://www.helloweba.net/demo/2018/wowjs/