WOW.js动画插件

有的页面在向下滚动的时候，有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时，才能显示动画。wow.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

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

使用wow.js这个插件（实现页面动画效果），提高前端开发效率

动画演示：

WOW.js – 让页面滚动更有趣_dowebok

下载：

mirrors / matthieua / WOW · GitCode

使用npm包管理工具，下载:

npm install wowjs

下载完成后，我们把 node_modules目录下的 对应的js文件和css样式表文件 拿出来，放置到你当前项目的指定目录下，然后，在你当前项目中去使用。

animate.css中文官网地址：

Animate中文网 – Animate安装、Animate使用、Animate下载

使用方法：

1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

2、在最底部或引入的css下面引用wow.js或者wow.min.js，然后再下面再写一行javascript代码。（无需引用jquery）

3、写html代码（必须设置为块状或者行内块状），并添加class类名。

在页面中，我们使用旧版本的animate.css即可。

旧版本的animate.css 的类名引入：

小马过河 小马过河

新版本的animate.css的类名引入：

在类名的前面要加 前缀animate__

小马过河 小马过河

预览：

另外可以加入 data-wow-duration（动画持续时间）、 data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）、data-wow-iteration（动画执行次数）属性 （可选可不选）

* { 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; } WOW.js 简单易用 轻量级 WOW.js 无需 jQuery 纯 JS WOW.js 依赖 animate.css 多种动画 WOW.js 无需 jQuery！？ 谢谢

 

new WOW().init();

 预览：