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

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

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

進入它的官網，就知道這個類庫非常有趣了，屏幕上長滿了各種各樣的狗頭。

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

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

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

如何使用

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

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

如果使用 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>

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

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

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

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

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

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

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

<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 的分享啦，感興趣的同學可以去試試~

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

在 編程導航 中還能發現更多優質編程學習資源，歡迎分享給有需要的同學吧！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。