一分鐘，讓頁面滾動更有趣

前段時間剛給大家推薦了一個強大易用的跨平臺 CSS3 動畫庫 ，內(nèi)置了很多常用的 CSS 動畫，可以一行代碼讓頁面動起來。

今天再推薦它的堂弟，WOW.js，一個有點兒皮的頁面滾動效果庫。

進(jìn)入它的官網(wǎng)，就知道這個類庫非常有趣了，屏幕上長滿了各種各樣的狗頭。

官網(wǎng)即這個庫的介紹和演示頁面，當(dāng)你向下滾動頁面時，一個個狗頭會以各種不同的動畫進(jìn)行展現(xiàn)。在狗頭中間，可以看到這個庫的優(yōu)秀特性，比如簡單易用、純 JS 實現(xiàn)、不依賴 jQuery、動畫豐富、只有 3 kb 大小、即時展現(xiàn)等。

WOW.js 基于 Animate.css，能夠在頁面滾動到某一位置時，觸發(fā) Animate.css 的內(nèi)置動畫，從而讓頁面更加生動。

下面演示一下它的用法，一分鐘就能學(xué)會！

如何使用

滾動效果的應(yīng)用場景有很多，比如你要給朋友做一個生日祝福網(wǎng)站，可以先打上老長一段話，當(dāng)朋友看完這段話，滾動頁面到底部的時候，彈出一個生日蛋糕 ??，會增加不少驚喜感。

如果自己來做滾動動畫，你要編寫 JS 代碼來判斷頁面滾動位置是否達(dá)到元素所處位置，再動態(tài)添加類名，一個元素也還好說，如果想控制多個，就比較麻煩了。

如果使用 WOW.js，一切就簡單了許多。

它的使用方式很簡單，先引入它依賴的 Animate.css：

再引入 WOW.js 并且初始化一個實例，依然可以使用 CDN：

接下來，選擇想要在滾動時觸發(fā)動畫效果的元素，給它加上 類名。

最后，從 Animate.css 的動畫庫中選擇一個效果，并且給選中的元素添加對應(yīng)的類名即可。

比如我選擇 “向上彈出” 的動效，對應(yīng)的類名是 ：

然后就大功告成啦，生日蛋糕默認(rèn)會隱藏，直到用戶滾動到它才會向上彈出。

此外，還可以通過給元素添加類名來控制動畫的持續(xù)時長、重復(fù)次數(shù)、延時、滾動偏移等：

也可以在初始化實例時，給所有元素添加全局配置：

以上就是 WOW.js 的分享啦，感興趣的同學(xué)可以去試試~

?? 項目地址：https://www.code-nav.cn/rd/?rid=28ee4e3e6008319f00473b1a245a2c70

在 編程導(dǎo)航 中還能發(fā)現(xiàn)更多優(yōu)質(zhì)編程學(xué)習(xí)資源，歡迎分享給有需要的同學(xué)吧！