想讓網(wǎng)頁動(dòng)起來，我們可以借助animate動(dòng)畫庫，里面提供了豐富的動(dòng)畫效果。
首先引入animate.css文件，可使用cdn或本地引入
然后給需要?jiǎng)赢嫷脑靥砑宇惷?/p>
具體的動(dòng)畫和其對(duì)應(yīng)的類名可以去官網(wǎng)查看。
這樣就基本實(shí)現(xiàn)動(dòng)畫效果了，但除了剛進(jìn)入頁面的可視區(qū)域能看到動(dòng)畫效果外，其余非可視區(qū)域在還沒滾動(dòng)到位置的時(shí)候動(dòng)畫效果就已經(jīng)播放完了。我們需要一個(gè)工具來實(shí)現(xiàn)滾動(dòng)到誰誰播放的功能。這時(shí)我們就要用到wow.js，首先引入js庫，并給wow初始化，如圖所示：
然后在加了animate類名的元素前面加上”wow”類名。
Wow.js還提供了四個(gè)DOM屬性來控制動(dòng)畫的時(shí)間、次數(shù)和距離。
1、data-wow-duration：更改動(dòng)畫持續(xù)時(shí)間
2、data-wow-delay：動(dòng)畫開始前的延遲
3、data-wow-iteration：動(dòng)畫的次數(shù)重復(fù)（無限次：infinite）
4、data-wow-offset：開始動(dòng)畫的距離（與瀏覽器底部相關(guān)）
關(guān)鍵詞:
