网页内容一开始不显示,随着鼠标下拉延迟显示,还有时间差
一开始觉得好难好复杂好高大上,直到我发现 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"headmeta charset="utf-8" /> title>demo</> style type="text/css"> *{margin:0;padding} bodyoverflow-xhiddenfont-family"Microsoft Yahei" body h1width100%80px 0font-size50pxfont-weight500text-aligncenter body .txt16px .dowebok0 auto .dowebok ullist-style-typenone .dowebok .row .dowebok .wowdisplayinline-block280pxheight30px 15px 0border-radius50%font30px/280px "Microsoft Yahei"vertical-aligntop*displayinlinezoom1 .bg-greenbackground#5bd5a0 .bg-blue#1daee9 .bg-purple#c843a5 .bg-red#eb3980 .bg-yellow#ffcc35} stylelink rel="stylesheet" href="css/animate.css"bodyh1>WOW.js - 页面滚动动画展示p class="txt">WOW.js 能让页面滚动时显示动画,使页面更有趣。pdiv ="dowebok"> ="row"> ="wow rollIn bg-blue"></div="wow bounceInDown bg-green">WOW.js="wow lightSpeedIn bg-purple"> ="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"="wow bounceInRight bg-blue">轻量级="wow bounceInLeft bg-green"="wow flipInX bg-purple"="wow bounceInRight bg-yellow">无需 jQuery="wow shake bg-red"="wow swing bg-purple"="2">纯 JS="wow rollIn bg-red"="wow bounceInU bg-yellow"="wow lightSpeedIn bg-green"="0.5s"="wow bounceInLeft bg-purple">依赖 animate.css="wow pulse bg-blue"="0.25s"="wow lightSpeedIn bg-yellow">多种动画="wow bounce bg-green"="wow bounceInUp bg-red"="wow bounceInRight bg-purple"="wow rollIn bg-red">无需 jQuery!?="wow bounceInDown bg-green"="1s"="wow bounceInRight bg-yellow"="1.5s">谢谢script src="js/wow.min.js"script> //只能兼容IE10+ if (!(/msie [6|7|8|9]i.test(navigator.userAgent))){ new WOW().init(); }; html>
效果图
网上有很多特别简单的小教程,我也来跟着走一遍
引入wow.js和animate.css之后
实例化构造函数,调用基础方法
<script> //只能兼容IE10+ if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }; </script>
然后写上html结构
="box"> ="wow slideInLeft"="wow bounceIn"="wow slideInRight">
每个子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 { 300px; height: border-radius: 50%; } .box div:nth-child(1) { background-color: #9C89B8; } .box div:nth-child(2) { #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简单举个小例子
#box width 100px height background paleturquoise margin 100px auto; id="box" class="animated bounce">
可以看到绿色小方块弹啊弹啊弹
还有动画循环执行、动画延时执行、动画执行时长的设置
delay-2s:2秒后再执行动画
delay-3s:3秒后再执行动画
delay-4s:4秒后再执行动画
delay-5s:5秒后再执行动画
slow:用2秒执行完动画
slower:用3秒执行完动画
fast:用0.8秒执行完动画
faster:用0.5秒执行完动画
如果要设置无限重复执行动画,可用下面这个类
infinite
="animated bounce delay-2s faster infinite">
这是全部怼上的效果,感觉还不错
下面一个点击按钮触发动画的demo
#btn display block width100px height30px background text-align center line-height border margin30px auto cursorpointerbutton ="btn">btnbutton> function animateCss(element,animationName,callback) { /* 获取传过来的 */ const node = document.querySelector(element); 给元素加上基础类animated,还有动画类 node.classList.add('animated,animationName); handleAnimationEnd() { 移除基础类和动画类 node.classList.remove( 解除当前元素的事件监听 node.removeEventListener(animationend 如果有回调函数,就执行回调函数 */ typeof callback === ) callback(); } 通过事件监听,当动画结束后,执行handleAnimationEnd函数 node.addEventListener(点击按钮后触发animateCss函数 btn.onclick = () { animateCss(#boxbounce); }; >
如果animate.css里的动画无法满足你的需求,可以自己写
不过不要直接修改animate.css文件
找到animated这个类,复制到自己的css文件里,然后修改设置即可
Over~