wow.js 需要 animate.css 配合，所以它支援 animate.css 多達 60 多種的動畫效果，能滿足您的各種需求。wow.min.js可以實現在滾動下的動畫狀態。
使用方法：
1、加入animate.css
<linkhref=""rel="stylesheet">
2、加入wow.js 。（無需引用jquery）
注意new wow().init();中的wow要大寫，否則就沒效果了。
3、元素中加入class
<divclass="wow animated tada">tada
4、可以加入 data-wow-duration（動畫持續時間）和 data-wow-delay（動畫延遲時間）屬性，如.（在css下方js上方寫需要動畫的元素（必須設定為塊狀或者行內塊狀！必須設定為塊狀或者行內塊狀！必須設定為塊狀或者行內塊狀！），並新增class類名。)
類名前面的wow是每乙個帶動畫的元素都要加的，slideinleft就是說明動畫樣式。後面的data-wow-duration（動畫持續時間）、data-wow-delay（動畫延遲時間）、data-wow-offset（元素的位置露出後距離底部多少畫素執行）和data-wow-iteration（動畫執行次數）這四個屬性可選可不選。
4、為了寫文章專門測試了一下data-wow-offset和data-wow-iteration這兩個屬性，其中data-wow-offset="數值"中的數值是動畫完成後元素距離顯示器底部的位置，而不是距離瀏覽器視窗底部的位置。
5、wow.js 使用了 queryselectorall 方法，ie 低版本會報錯。為了達到更好的相容，最好加乙個瀏覽器及版本判斷。
6、也可以自定義wow.js
varwow =newwow();
wow.init();
屬性/方法
型別預設值
說明boxclass
字串『wow』
需要執行動畫的元素的 class
animateclass
字串『animated』
animation.css 動畫的 class
offset整數0
距離可視區域多少開始執行動畫
mobile
布林值true
是否在移動裝置上執行動畫
live
布林值true
非同步載入的內容是否有效
增加順序動畫
在標籤上增加
js 判斷進入可視區域
1.使用場景 2.實現 監聽網頁滾動事件 window scroll function 拓展 獲取指定元素距離網頁左上角 0,0 的縱向偏移距離 該值會隨著滾動條的變化而變化 scrolltop變大，該值變小 scrolltop變小，該值變大 document.getelementbyid id g...
元素進入可視區域執行
doctype html html lang en head meta charset utf 8 title title title style show show keyframes loading to style head body p id show p script newclassna...
背景半透明覆蓋整個可視區域
place holder height 1000px 這個效果效果在工作中經常會遇到，這篇文章主要介紹了當內容超過一屏時如何做到多瀏覽器的相容性。下面我們通過乙個簡單的例子看看如何實現，高手請繞道。html 很簡單 d i v class mask opacity d i v 1 半透明效果可以使用...