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

前段時間剛給大家推薦了一個強大易用的跨平臺 CSS3 動畫庫 Animate.css，內(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：

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

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

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

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

<div>祝你生日快樂，abaaba！此處省略 1000 字 </div> <!-- 想添加滾動效果的元素 --> <div class="wow">🎂 </div>

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

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

<div class="wow bounceInUp">🎂 </div>

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

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

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

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

wow = new WOW({boxClass: 'wow', animateClass: 'animated',offset: 0, mobile: true,live: true, }) wow.init();

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的页面滚动效果库，有点儿皮！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。