网页内容一开始不显示，随着鼠标下拉延迟显示，还有时间差
一开始觉得好难好复杂好高大上，直到我发现 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~