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

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

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

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

使用教程

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

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

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

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

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

  1. <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>
4、需要注意的是别忘了初始化设置参数
  1. <script>
  2.     wow = new WOW(
  3.         {
  4.             boxClass: 'wow',      // 默认属性名
  5.             animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
  6.             offset: 0,          // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
  7.             mobile: true,       // 是否在移动设备中开启动画
  8.             live: true        // 持续监测页面中是否插入新的wow元素
  9.         }
  10.     );
  11.     wow.init();
  12. </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 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WOW.js演示</title>
  6. <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
  7. <style>
  8. * { margin: 0; padding: 0;}
  9. body { overflow-x: hidden; font-family: "Microsoft Yahei";}
  10. body h1 { width: 100%; margin: 80px 0; font-size: 50px; font-weight: 500; text-align: center;}
  11. body .txt { margin: 80px 0; font-size: 16px; text-align: center;}
  12. .dowebok { margin: 0 auto;}
  13. .dowebok ul { list-style-type: none;}
  14. .dowebok .row { font-size: 0; text-align: center;}
  15. .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;}
  16. .bg-green { background: #5bd5a0;}
  17. .bg-blue { background: #1daee9;}
  18. .bg-purple { background: #c843a5;}
  19. .bg-red { background: #eb3980;}
  20. .bg-yellow { background: #ffcc35;}
  21.  
  22. .vad { margin: 50px 0 5px; padding-bottom: 60px; font-family: Consolas,arial,宋体; text-align:center; display:none}
  23. .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;}
  24. .vad a:hover { color: #fff; background-color: #000;}
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <h1>WOW.js - 让页面滚动更有趣</h1>
  30.  
  31. <p class="txt">WOW.js 能让页面滚动时显示动画，使页面更有趣。</p>
  32.  
  33. <div class="dowebok">
  34.     <div class="row">
  35.         <div class="wow rollIn bg-blue"></div>
  36.         <div class="wow bounceInDown bg-green">WOW.js</div>
  37.         <div class="wow lightSpeedIn bg-purple"></div>
  38.     </div>
  39.  
  40.     <div class="row">
  41.         <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用</div>
  42.         <div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
  43.         <div class="wow bounceInRight bg-blue">轻量级</div>
  44.     </div>
  45.  
  46.     <div class="row">
  47.         <div class="wow bounceInLeft bg-green"></div>
  48.         <div class="wow flipInX bg-purple">WOW.js</div>
  49.         <div class="wow bounceInRight bg-yellow"></div>
  50.     </div>
  51.  
  52.     <div class="row">
  53.         <div class="wow rollIn bg-blue">无需 jQuery</div>
  54.         <div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
  55.         <div class="wow swing bg-purple" data-wow-iteration="2">纯 JS</div>
  56.     </div>
  57.  
  58.     <div class="row">
  59.         <div class="wow rollIn bg-red"></div>
  60.         <div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div>
  61.         <div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div>
  62.     </div>
  63.  
  64.     <div class="row">
  65.         <div class="wow bounceInLeft bg-purple">依赖 animate.css</div>
  66.         <div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div>
  67.         <div class="wow lightSpeedIn bg-yellow">多种动画</div>
  68.     </div>
  69.  
  70.     <div class="row">
  71.         <div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div>
  72.         <div class="wow bounceInUp bg-red">WOW.js</div>
  73.         <div class="wow bounceInRight bg-purple"></div>
  74.     </div>
  75.  
  76.     <div class="row">
  77.         <div class="wow rollIn bg-red" data-wow-delay="0.5s">无需 jQuery！？</div>
  78.         <div class="wow bounceInDown bg-green" data-wow-delay="1s"></div>
  79.         <div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">谢谢</div>
  80.     </div>
  81. </div>
  82.  
  83. <script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
  84. <script>
  85. <script>
  86.     wow = new WOW(
  87.         {
  88.             boxClass: 'wow',      // 默认属性名
  89.             animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
  90.             offset: 0,          // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
  91.             mobile: true,       // 是否在移动设备中开启动画
  92.             live: true        // 持续监测页面中是否插入新的wow元素
  93.         }
  94.     );
  95.     wow.init();
  96. </script>
  97. </script>
  98.  
  99. </body>
  100. </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. 单片机开发——02工欲善其事必先利其器（Proteus软件安装破解）

    在单片机开发工程中,博主经常通过模拟软件Proteus进行模拟仿真,将编译生成的"HEX"文件下载在单片机芯片中,然后进行后期的debug工作,当模拟仿真完成之后,进行硬件测试部分 ...

  2. 从CSDN到cnblogs

    博客热的年代,我也赶潮流,开了不少,以前的blogbus博客大巴,CSDN,以及MSN space,再到新浪博客,微博... 提笔写的热情越来越少,这次准备重新整理以前在CSTQB.业界分享的一些内容 ...

  3. xinetd被动服务唤醒

    rsync设置: 1.打开rsync控制开关(修改文件 /etc/default/rsync)2.sudo cp /usr/share/doc/rsync/examples/rsyncd.conf / ...

  4. WARN: Establishing SSL connection without server's identity verification is not recommended

    0.要想用Java连接mysql数据库,首先装好JDK,配置好环境变量,将jdk*.*.*\lib放入classpath,将jdk*.*.*\bin放入path中(*.*.*表示版本号):其次安装好m ...

  5. Hexo的更新 主题的更换

    1:HEXO更新 ①hexo generate ②hexo deploy 2:  HEXO主题的更换,①找到主题的github地址后 进入自己的HEXO文件夹然后 git clone xxxx(地址) ...

  6. 让Virtualbox复制出的虚拟机联网

    http://www.williamsang.com/archives/215.html vi /etc/udev/rules.d/70-persistent-net.rules 注释掉eth0的相关 ...

  7. ThreadPoolExecutor简介

    ThreadPoolExecutor简介 并发包中提供的一个线程池服务 23456789 public ThreadPoolExecutor(int corePoolSize,//线程池维护线程的最少 ...

  8. 【游戏开发】Excel表格批量转换成lua的转表工具

    一.简介 在上篇博客<[游戏开发]Excel表格批量转换成CSV的小工具> 中,我们介绍了如何将策划提供的Excel表格转换为轻便的CSV文件供开发人员使用.实际在Unity开发中,很多游 ...

  9. linux系统版本查看

    Linux下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然. 1.# uname -a   (Linux查看版本当前操作系统内核信息)   Lin ...

  10. AT89S52最小系统

    NC是NOT CONNECTED的缩写,即空脚. 芯片中NC引脚没有任何用途,只是限于封装形式,该引脚必须存在.