網頁內容一開始不顯示，隨著滑鼠下拉延遲顯示，還有時間差
一開始覺得好難好復雜好高大上，直到我發現 wow.js ……
首先是演示地址：https://www.delac.io/wow/
嗯，狗子確實很可愛
接下來是下載：http://www.downyi.com/downinfo/37040.html
似乎所有人都給了一個github地址讓下載，然鵝我嘗試了無數遍始終打不開網址
大概是因為么有翻墻吧555……
反正找了個野雞網站下載到了
因為wow.js必須和animate.css搭配使用
所以兩個都一起下載了
首先說下兼容到IE10+以及其他主流瀏覽器
官方演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo</title> <style type="text/css"> *{margin:0;padding:0;} body{overflow-x:hidden;font-family:"Microsoft Yahei";} body h1{width:100%;margin:80px 0;font-size:50px;font-weight:500;text-align:center;} body .txt{margin:80px 0;font-size:16px;text-align:center;} .dowebok{margin:0 auto;} .dowebok ul{list-style-type:none;} .dowebok .row{font-size:0;text-align:center;} .dowebok .wow{display:inline-block;width:280px;height:280px;margin:30px 15px 0;border-radius:50%;font:30px/280px "Microsoft Yahei";vertical-align:top;*display:inline;zoom:1;} .bg-green{background:#5bd5a0;} .bg-blue{background:#1daee9;} .bg-purple{background:#c843a5;} .bg-red{background:#eb3980;} .bg-yellow{background:#ffcc35;} </style> <link rel="stylesheet" href="css/animate.css"> </head> <body> <h1>WOW.js - 頁面滾動影片展示</h1> <p class="txt">WOW.js 能讓頁面滾動時顯示影片，使頁面更有趣，</p> <div class="dowebok"> <div class="row"> <div class="wow rollIn bg-blue"></div> <div class="wow bounceInDown bg-green">WOW.js</div> <div class="wow lightSpeedIn bg-purple"></div> </div> <div class="row"> <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">簡單易用</div> <div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow bounceInRight bg-blue">輕量級</div> </div> <div class="row"> <div class="wow bounceInLeft bg-green"></div> <div class="wow flipInX bg-purple">WOW.js</div> <div class="wow bounceInRight bg-yellow"></div> </div> <div class="row"> <div class="wow rollIn bg-blue">無需 jQuery</div> <div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow swing bg-purple" data-wow-iteration="2">純 JS</div> </div> <div class="row"> <div class="wow rollIn bg-red"></div> <div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div> <div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div> </div> <div class="row"> <div class="wow bounceInLeft bg-purple">依賴 animate.css</div> <div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div> <div class="wow lightSpeedIn bg-yellow">多種影片</div> </div> <div class="row"> <div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div> <div class="wow bounceInUp bg-red">WOW.js</div> <div class="wow bounceInRight bg-purple"></div> </div> <div class="row"> <div class="wow rollIn bg-red" data-wow-delay="0.5s">無需 jQuery！？</div> <div class="wow bounceInDown bg-green" data-wow-delay="1s"></div> <div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">謝謝</div> </div> </div> <script src="js/wow.min.js"></script> <script> //只能兼容IE10+ if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script> </body> </html>
效果圖
網上有很多特別簡單的小教程，我也來跟著走一遍
引入wow.js和animate.css之后
實體化建構式，呼叫基礎方法
<script> //只能兼容IE10+ if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script>
然后寫上html結構
<div class="box"> <div class="wow slideInLeft"></div> <div class="wow bounceIn"></div> <div class="wow slideInRight"></div> </div>
每個子div都有一個wow類，wow類就相當于Animate.css里的animated這個基礎類
wow類是一定要的，因為它是一個基礎類，如果不寫上，后面一切都是徒勞
wow類后面跟著的是動作類名，可以在Animate.css里面找
給這些div寫一點樣式，讓它們能在頁面中展示出來
<style type="text/css"> .box { width: 900px; margin: 100px auto; display: flex; } .box div { width: 300px; height: 300px; border-radius: 50%; } .box div:nth-child(1) { background-color: #9C89B8; } .box div:nth-child(2) { background-color: #F0A6CA; } .box div:nth-child(3) { background: #B8BEDD; } </style>
效果圖
來點高級點的玩法
在html元素上，還可以加上以下4個屬性
data-wow-delay：影片延遲執行（單位可以是ms或者s）
data-wow-duration：影片執行時長（單位同上）
data-wow-iteration：影片重復執行次數（數字或者回圈）
data-wow-offset：元素的位置露出后距離瀏覽器底部多少像素執行（偏移量）
wow大概就這么些，順便補充下animate.css
用一個div簡單舉個小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo</title> <style type="text/css"> #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } </style> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div id="box" class="animated bounce"></div> </body> </html>
可以看到綠色小方塊彈啊彈啊彈
還有影片回圈執行、影片延時執行、影片執行時長的設定
delay-2s：2秒后再執行影片
delay-3s：3秒后再執行影片
delay-4s：4秒后再執行影片
delay-5s：5秒后再執行影片
slow：用2秒執行完影片
slower：用3秒執行完影片
fast：用0.8秒執行完影片
faster：用0.5秒執行完影片
如果要設定無限重復執行影片，可用下面這個類
infinite
<div id="box" class="animated bounce delay-2s faster infinite"></div>
這是全部懟上的效果，感徑訓不錯
下面一個點擊按鈕觸發影片的demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo</title> <style type="text/css"> #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } #btn{ display: block; width:100px; height:30px; background: paleturquoise; text-align: center; line-height:30px; border:none; margin:30px auto; cursor:pointer; } </style> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div id="box"></div> <button id="btn">btn</button> <script> function animateCss(element, animationName, callback) { /* 獲取傳過來的 */ const node = document.querySelector(element); /* 給元素加上基礎類animated，還有影片類 */ node.classList.add('animated', animationName); function handleAnimationEnd() { /* 移除基礎類和影片類 */ node.classList.remove('animated', animationName); /* 解除當前元素的事件監聽 */ node.removeEventListener('animationend', handleAnimationEnd); /* 如果有回呼函式，就執行回呼函式 */ if (typeof callback === 'function') callback(); } /* 通過事件監聽，當影片結束后，執行handleAnimationEnd函式 */ node.addEventListener('animationend', handleAnimationEnd); } /*點擊按鈕后觸發animateCss函式*/ btn.onclick = function() { animateCss('#box', 'bounce'); }; </script> </body> </html>
如果animate.css里的影片無法滿足你的需求，可以自己寫
不過不要直接修改animate.css檔案
找到animated這個類，復制到自己的css檔案里，然后修改設定即可
Over~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7158.html
標籤：jQuery