三.WOW.JS · 前端菜鳥成長記

[TOC] # WOW.JS ## 1.介紹和兼容 wow.js是做網頁滾動動畫的js框架，配合animate.css使用，可以在網頁滾動的過程中**釋放animate.css動畫效果**。官網地址：[http://mynameismatthieu.com/WOW/index.html](http://mynameismatthieu.com/WOW/index.html)\> 源碼下載地址：[https://github.com/matthieua/WOW](https://github.com/matthieua/WOW) 兼容性: 同animate.css ## 2.使用步驟使用步驟： 1 引入animate.css文件和wow.js文件（animate.css特效參考 [https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/) ） 2 書寫html結構在要做滾動動畫的元素身上添加**兩個類名** wow(聲明元素使用混動動畫) 動畫名稱（滾動釋放的動畫名稱） 3 初始化wow： new WOW().init() ***** **舉例** ``` <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; } </style> <link rel="stylesheet" href="animate/animate.css"> </head> <body> <div class="wow bounceInLeft"></div> <script src="wow/wow.js"></script> <script> new WOW().init() /*初始化wow*/ </script> </body> ``` ## 3.注意 WOW.JS動畫效果不可重復，只能一次性顯示 **引入文件的先后順序** ![](https://img.kancloud.cn/8c/fa/8cfa1b28dda62501a68686e4df545422_695x141.png) ## 4.動畫配置 wow元素的標簽屬性： data-wow-duration 動畫持續時間，以秒/s為單位 data-wow-delay動畫延時時間，以秒/s為單位 data-wow-iteration動畫播放次數，值是純數字，infinite表示循環播放 data-wow-offset 元素頂部偏離可視區（容器）底部動畫出現的距離（用于設置動畫在頁面的出場位置）