如何使用WOW.js库

简介

Wow.js是一个不依赖于jQuery的轻量级js库，其作用就是能够在网页不断往下滚动的时候逐渐释放通过animateCSS添加的这些动画。

注意:必须和animateCSS配合使用。

浏览器兼容性

IE10+     谷歌     火狐     opera    safari

用法步骤

1、引入文件

<link rel="stylesheet" href="animate.min.css"> 

<script src="wow.min.js"></script>

2、HTML
<div class="wow slideInLeft"></div> 

<div class="wow slideInRight"></div>

3、JavaScript

new WOW().init();

wow属性

属性是指写在HTML身上的

data-wow-delay       延迟

data-wow-duration   动画持续的时间

data-wow-iteration   动画重复的次数

data-wow-offset       距离浏览器底部到隐藏框顶部的距离，如下贴图

配置参数


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,788评论 0赞 2
  • 框架实战-day1
    HTML5常用框架 前言 随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率...
    撩课_叶建华阅读 1,154评论 0赞 13
  • DAY01
    前言： 随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率，常见的框架代表有...
    秒签T阅读 352评论 0赞 0
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,327评论 0赞 11
  • 五绝·夜宿辽滨
    路漫灯空照，楼高四野平。 天寒寻暖酒，对饮异乡情。
    尘寞阅读 194评论 9赞 25