三.WOW.JS · 前端菜鸟成长记

[TOC] # WOW.JS ## 1.介绍和兼容 wow.js是做网页滚动动画的js框架，配合animate.css使用，可以在网页滚动的过程中**释放animate.css动画效果**。官网地址：[http://mynameismatthieu.com/WOW/index.html](http://mynameismatthieu.com/WOW/index.html)\> 源码下载地址：[https://github.com/matthieua/WOW](https://github.com/matthieua/WOW) 兼容性: 同animate.css ## 2.使用步骤使用步骤： 1 引入animate.css文件和wow.js文件（animate.css特效参考 [https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/) ） 2 书写html结构在要做滚动动画的元素身上添加**两个类名** wow(声明元素使用混动动画) 动画名称（滚动释放的动画名称） 3 初始化wow： new WOW().init() ***** **举例** ``` <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; } </style> <link rel="stylesheet" href="animate/animate.css"> </head> <body> <div class="wow bounceInLeft"></div> <script src="wow/wow.js"></script> <script> new WOW().init() /*初始化wow*/ </script> </body> ``` ## 3.注意 WOW.JS动画效果不可重复，只能一次性显示 **引入文件的先后顺序** ![](https://img.kancloud.cn/8c/fa/8cfa1b28dda62501a68686e4df545422_695x141.png) ## 4.动画配置 wow元素的标签属性： data-wow-duration 动画持续时间，以秒/s为单位 data-wow-delay动画延时时间，以秒/s为单位 data-wow-iteration动画播放次数，值是纯数字，infinite表示循环播放 data-wow-offset 元素顶部偏离可视区（容器）底部动画出现的距离（用于设置动画在页面的出场位置）