首先官網下載：https://github.com/matthieua/WOW
animate.css
wow.js

1，在頭部引用animate.css

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

2，body底部引入wow.js 且初始化一下

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

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

注意**new WOW().init();中的WOW要大寫，否則就沒效果了**。

3、在css下方js上方寫需要動畫的元素（必須設置為塊狀或者行內塊狀！必須設置為塊狀或者行內塊狀！必須設置為塊狀或者行內塊狀！），并添加class類名。

示例1：

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>

示例2：

<ul><li class="wow bounceInLeft">111</li><li class="wow bounceInRight">222</li> </ul>

類名前面的wow是每一個帶動畫的元素都要加的，slideInLeft就是說明動畫樣式。
后面的data-wow-duration（動畫持續時間）、data-wow-delay（動畫延遲時間）、data-wow-offset（元素的位置露出后距離底部多少像素執行）和data-wow-iteration（動畫執行次數）這四個屬性可選可不選。

data-wow-duration：更改動畫持續時間
data-wow-delay：動畫開始前的延遲
data-wow-offset：開始動畫的距離（與瀏覽器底部相關）
data-wow-iteration：動畫的次數重復（無限次：infinite）

動畫效果：
wow rollIn 從左到右、順時針滾動、透明度從100%變化至設定值
wow bounceIn 從原位置出現，由小變大超出設定值，再變小小于設定值，再回歸設定值、透明度從100%變化至設定值
wow bounceInUp 從下往上、竄上來以后會向上超出一部分然后彈回去、透明度為設定值不變
wow bounceInDown 從上往下、掉下來以后會向下超出一部分然后彈跳一下、透明度為設定值不變
wow bounceInLeft 從左往右、移過來以后會向右超出一部分然后往左彈一下、透明度為設定值不變
wow bounceInRight 從右往左、移過來以后會向左超出一部分然后往右彈一下、透明度為設定值不變
wow slideInUp 從下往上、上來后固定到設定位置、透明度為設定值不變（up是從下往上）（如果元素在最下面，會撐開盒子高度）
wow slideInDown 從上往下、上來后固定到設定位置、透明度為設定值不變
wow slideInLeft 從左往右、上來后固定到設定位置、透明度為設定值不變（left卻是從左往右）
wow slideInRight 從右往左、上來后固定到設定位置、透明度為設定值不變
wow lightSpeedIn 從右往左、頭部先向右傾斜，又向左傾斜，最后變為原來的形狀、透明度從100%變化至設定值
wow pulse 原位置放大一點點在縮小至原本大小、透明度為設定值不變（配合動畫執行次數屬性效果更佳）
wow flipInX 原位置后仰前栽、透明度從100%變化至設定值
wow flipInY 原位置左右旋動、透明度從100%變化至設定值
wow bounce 上下抖動、透明度為設定值不變（配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖）
wow shake 左右抖動、透明度為設定值不變（配合動畫執行次數和動畫持續時間屬性可以實現劇烈抖動亦或是慢慢抖）
wow swing 從右往左、頭部先向右傾斜，又向左傾斜，最后變為原來的形狀、透明度為設定值不變
wow bounceInU 原位置不變、直接從不顯示到顯示（無過過渡效果）
wow wobble 原位置不變、類似于一個人站在那左右晃頭、透明度為設定值不變

以上就是引用wow實現動態移入效果的步驟。

4、其中data-wow-offset="數值"中的數值是動畫完成后元素距離顯示器底部的位置，而不是距離瀏覽器窗口底部的位置。

有的網站采用全屏滾動的fullpage插件與wow相結合的方法，實現的效果比較酷炫。我們完全可以仿寫。

但是使用fullpage.js下wow.js無效失效沒動作

問題出在fullpage隱藏了滾動條,將滾動條開啟即可,把scrollBar設置為true,代碼如下
　　$(‘#fullpage‘).fullpage({
scrollBar:true；
　　});
最后利用css將滾動條隱藏,將html添加overflowhidden，代碼如下
　　html{

overflow:hidden;

}

5、塊級元素

塊狀元素代表性的就是div，其他如p、nav、aside、header、footer、section等語義化標簽。

1.h1 - h6
標題使用< h1 > 至 < h6 >標簽進行定義.具有align屬性,屬性值可以使left.center,right

一級標題

**2.列表** 列表分為三種,有序列表ol,無序列表和定義類表dl,其中ol和ul必須結合li標簽使用,而dl則必須結合dt,dd使用

ol 有序列表

ul 無序列表

li 列表項

dl 定義列表

： 列表的標題，這個標簽是必須的

： 列表的列表項，如果不需要它，可以不加

li不能單獨存在,必須包裹在ul或者dl中

3.排版標簽
段落標簽

div : 把標簽中的內容作為一個塊兒來對待,必須單獨占一行

4.hr
水平分割線,可以在視覺上將文檔分隔成各個部分

等

總結

以上是生活随笔為你收集整理的页面加载时模块移入动画---wow的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。