网页延迟加载动画的实现-WOW.js

网页内容一开始不显示,随着鼠标下拉延迟显示,还有时间差

一开始觉得好难好复杂好高大上,直到我发现 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~

 

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...