我的位置:首页 > 前端开发>Jquery

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

时间:2020-02-25 14:17:00 来源:互联网 作者: 神秘的大神 字体:

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

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