3.WOW
1.簡(jiǎn)介
官網(wǎng)：http://mynameismatthieu.com/WOW/
github:https://github.com/matthieua/WOW
1? 核心作用：讓頁(yè)面滾動(dòng)更有趣
通過(guò)WOW.js，可以在頁(yè)面逐漸向下滾動(dòng)的過(guò)程中逐漸釋放這些動(dòng)畫(huà)效果。也就是說(shuō)：當(dāng)我們向下滾動(dòng)頁(yè)面時(shí)，可以省去很多判斷條件，讓CSS動(dòng)畫(huà)逐漸展示出來(lái)。
2? 特點(diǎn)
輕量級(jí)類(lèi)庫(kù)， 不依賴(lài)jQuery，超簡(jiǎn)單的安裝和使用，與animate.css配合，只需要短短幾行代碼就可以實(shí)現(xiàn)很多特效。容易定制，我們可以改變動(dòng)畫(huà)去設(shè)置喜歡的風(fēng)格、延遲、長(zhǎng)度、偏移和迭代等等。
3? 兼容性考慮
因?yàn)椋?b>WOW要和Animate配合使用，所有其也只兼容支持CSS3 animate屬性的瀏覽器：IE10+、Firefox、Chrome、Opera、Safari。
2.最簡(jiǎn)單的使用
1.引入WOW和Animate
2.在布局中使用wow和animate
1.基本的布局
2.布局添加樣式
3.JavaScript中進(jìn)行初始化
3.WOW滾動(dòng)案例
1.修改布局
執(zhí)行效果：
2.修改item的動(dòng)畫(huà)
4.WOW的常用屬性
data-wow-delay: 動(dòng)畫(huà)開(kāi)始前延遲
data-wow-duration: 動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng)
data-wow-iteration: 動(dòng)畫(huà)重復(fù)次數(shù)
data-wow-offset: 瀏覽器底部到指定item的頂部的距離（偏移量）
來(lái)搞定它?? 可以加入data-wow-duration（動(dòng)畫(huà)持續(xù)時(shí)間）和data-wow-delay（動(dòng)畫(huà)延遲時(shí)間）等屬性。比如：
data-wow-offset：用于決定當(dāng)前的元素在滾動(dòng)的時(shí)候? ,? 到達(dá)怎樣的位置出現(xiàn)（是在滾動(dòng)之前出現(xiàn)、滾動(dòng)之后出現(xiàn)，還是滾動(dòng)的時(shí)候出現(xiàn)）http://mynameismatthieu.com/WOW/
1.探究data-x-offset意思
1.圖解
2.布局代碼
3.js代碼
5.WOW的默認(rèn)配置參數(shù)
var wow = new WOW({boxClass: 'wow', // 動(dòng)畫(huà)元素的CSS類(lèi)（默認(rèn)類(lèi)名wow）animateClass:'animated', // 動(dòng)畫(huà)CSS類(lèi) （默認(rèn)類(lèi)名animated）offset: 0, // 距離可視區(qū)域多少開(kāi)始執(zhí)行動(dòng)畫(huà)（默認(rèn)為0）mobile: true, // 是否在移動(dòng)設(shè)備上執(zhí)行動(dòng)畫(huà) （默認(rèn)是true）});?wow.init();
6.WOW存在的問(wèn)題
WOW.js實(shí)例的動(dòng)畫(huà)只能加載一次，如果要重新執(zhí)行動(dòng)畫(huà)必須要進(jìn)行刷新。
但是在實(shí)際開(kāi)發(fā)中，更多時(shí)候動(dòng)畫(huà)是只加載一次，否則會(huì)造成視覺(jué)錯(cuò)亂。那如果要多次重復(fù)展現(xiàn)動(dòng)畫(huà)該如何處理呢？
