CSS3的出现给网站页面增加了活力，网站增色不少，有这么小小的一款插件就能做出很多动画效果。

最重要的是它：简单易用、轻量级、无需 jQuery......他就是wow.js

地址：https://daneden.github.io/animate.css/   也可以在这个地方看各种演示

下面就让我们来学习如何使用这款插件。

使用教程

1、wow.js依赖于animate.css，首先需要在 head内引入animate.css或者animate.min.css。   

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

2、引入wow.js或者wow.min.js，然后js文件里再写一行代码。

 <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>

3、然后在块状元素内添加相应的class类名就能实现相应的动画啦

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>
4、需要注意的是别忘了初始化设置参数
<script>

    wow = new WOW(

        {

            boxClass: 'wow',      // 默认属性名

            animateClass: 'animated', // 默认触发的动画类(包含在animate css中)

            offset: 0,          // 为所有添加wow的元素设置 data-wow-delay属性 的默认值

            mobile: true,       // 是否在移动设备中开启动画

            live: true        // 持续监测页面中是否插入新的wow元素

        }

    );

    wow.init();

</script>
wow 是必须要添加的
slideInLeft 说明了动画的样式，是从左边滑动出来的
data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。
 
下表依次是各种class类名的动画效果
wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值
   
wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
   
wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变
   
wow lightSpeedIn 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX 原位置后仰前栽、透明度从100%变化至设定值
wow flipInY 原位置左右旋动、透明度从100%变化至设定值
wow bounce 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU 原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

最后来看一个完整的测试案例吧

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>WOW.js演示</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">

<style>

* { 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;}

.vad { margin: 50px 0 5px; padding-bottom: 60px; font-family: Consolas,arial,宋体; text-align:center; display:none}

.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}

.vad a:hover { color: #fff; background-color: #000;}

</style>

</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="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>

<script>

<script>

    wow = new WOW(

        {

            boxClass: 'wow',      // 默认属性名

            animateClass: 'animated', // 默认触发的动画类(包含在animate css中)

            offset: 0,          // 为所有添加wow的元素设置 data-wow-delay属性 的默认值

            mobile: true,       // 是否在移动设备中开启动画

            live: true        // 持续监测页面中是否插入新的wow元素

        }

    );

    wow.init();

</script>

</script>

</body>

</html>

是不是很简单，页面初始化后随着滚动条加载模块，看起来和懒加载效果一样，高大上的感觉有木有？

温馨提示：IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）的更多相关文章

  1. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  2. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  3. 原生js图片懒加载特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js页面可视区域懒加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS window对象 返回下一个浏览的页面 forward()方法，加载 history 列表中的下一个 URL。

    返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL. 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: window.hi ...

  6. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  7. js中的预加载与懒加载（延迟加载）

    js中加载分两种:预加载与延迟加载 一.  预加载,增强用户的体验,但会加载服务器的负担.一般会使用多种 CSS(background).JS(Image).HTML(<img />) . ...

  8. angular 引入ocLazyLoad实现js、controller懒加载

    项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...

  9. js可视区域图片懒加载

    可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...

随机推荐

  1. JavaScript里面的循环方法小结

    一,原生JavaScript中的循环: for 循环代码块一定的次数,它有三个参数,来决定代码块的循环次数,第一个是初始值,第二个是终止值,第三个参数是变化规则: //for循环 for(var i ...

  2. VM虚拟机链接克隆及linux eth0网卡的快速设置方法

    对于后台开发者来说,在学习过程中必然接触众多中间件,在自己的虚拟机进行操作甚至搭建cluster是很常见的事情. 我在初学者时摸索出一套快速的克隆虚拟机方法.分享给大家. 产品VMware® Work ...

  3. java语言浅显理解

    从厉害的c语言.到经久不衰的java语言.到不太火的安卓和IOS,到当下流行的python,这些都是软件开发中的一员. 之前在传智播客上的免费视频资源上,听了老师对java语言的介绍,感觉挺好了.今天 ...

  4. IntelliJ IDEA添加jar包

    以JDBC-MySQL驱动包为例 1.在IntelliJ IDEA中打开要添加jar包的Project 2.File – Project Structure如下图 3.选择Moudules – 再选择 ...

  5. D. Kuro and GCD and XOR and SUM

    Kuro is currently playing an educational game about numbers. The game focuses on the greatest common ...

  6. jmeter利用自身代理录制电脑脚本（一）

    在利用代理录制脚本时一定要安装java jdk,不然不能录制的. 没有安装过java jdk安装jmeter后打开时会提示安装jdk,但是mac系统中直接打开提示安装jdk页面后下载的java并不是j ...

  7. junit+mock+spring-test构建后台单元测试

    from:从0开始,构建前后端分离应用 1. 一些基本概念 1.1 为什么要进行单元测试?我自己的理解是 1.能够快速发现问题.避免衍生BUG的出现     在对一些现有代码进行修改时,或者修改现有B ...

  8. Java Script 读书笔记 (三) 函数

    1. 函数作用域 在函数内部定义的变量,外部无法读取,称为"局部变量"(local variable). 变量v在函数内部定义,所以是一个局部变量,函数之外就无法读取. 函数内部定 ...

  9. java函数式编程之Consumer

    参考https://blog.csdn.net/z345434645/article/details/53794724 https://blog.csdn.net/chuji2012/article/ ...

  10. MySQL 慢查询日志总结

    慢查询日志概念 MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询日志 ...