网页延迟加载动画的实现-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">

<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~

网页延迟加载动画的实现-WOW.js的更多相关文章

在网页中添加动画，使用WOW.js来实现
[来源] 页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意刚知道wow.js这个插件,之前写的类似滚动时页面效果都是自己用jQuery写的,现在有了插件,开发更 ...
WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
滚动页面产生动画WOW.js的用法
简介在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件.WOW.js 依赖 animate.css,所以它支持 an ...
animate.css+wow.js页面滚动即时显示动画
1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...
wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
js写的数码时钟，在“最小化”浏览器或者 “切换网页”是动画效果好像不对
一.问题在“最小化”浏览器或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...
wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

随机推荐

[bzoj2152] [洛谷P2634] 聪聪可可
Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)--遇到这种问题,一般情况下石头剪刀布就好 ...
部署Maven项目到tomcat报错：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderLi
Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL 严重: Error config ...
Java 8 Stream流编程学习
本文是自己学习菜鸟教程中总结的笔记,用于快速找代码,完整的文档见菜鸟教程:Java 8 Stream Stream 使用一种类似用SQL语句从数据库查询数据的直观方式来提供一种对Java集合运算和表达 ...
XGBoost原理学习总结
XGBoost原理学习总结前言 XGBoost是一个上限提别高的机器学习算法,和Adaboost.GBDT等都属于Boosting类集成算法.虽然现在深度学习算法大行其道,但很多数据量往往没有太 ...
redis缓存数据库及Python操作redis
缓存数据库介绍 NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站, 特 ...
zabbix3.4搭建钉钉报警
1.在钉钉群里添加一个自定义的机器在设置说明中无需开启Outgoing机制红色箭头指的信息很重要后面脚本会用到 2.脚本 #!/usr/bin/python # -*- coding: utf-8 ...
alert弹出窗口，点击确认后关闭页面
alert("点击确认后,关闭页面"); window.opener=null;window.top.open('','_self','');window.close(this);
使用 web3D 技术的风力发电场展示
前言风能是一种开发中的洁净能源,它取之不尽.用之不竭.当然,建风力发电场首先应考虑气象条件和社会自然条件.近年来,我国海上和陆上风电发展迅猛.海水.陆地为我们的风力发电提供了很好地质保障.正是 ...
DOCKER 学习笔记7 Docker Machine 在阿里云实例化ECS 以及本地Windows 实例化虚拟机实战
前言通过以上6小节的学习,已经可以使用DOCKER 熟练的部署应用程序了.大家都可以发现使用 DOCKER 带来的方便之处,因为现在的话,只是在一台服务器上部署,这样部署,我们只需要一条命令,需要的 ...
python笔记带你走向测试开发之路-第一篇(数据类型之数字，序列)
数字数字的类型数字是 Python中比较常用的数据类型,数字有可以分为: 整型 int如 1,2,3 浮点型 float如 2.1,3.5 长整型 long如 3L,需要注意的是 Python2. ...

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

网页延迟加载动画的实现-WOW.js的更多相关文章

随机推荐

热门专题