umtheme 随着浏览器的兼容性增强，css3动画特效运用也越来越广，通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果，通过设置调整可以改变动画的风格、延迟、偏移量等。优美尚品精致版企业站主题就增加了这种效果，改变了传统的直显示模式，使页面不单调而更加生动，吸引浏览者的视点，增强浏览体验。今天介绍的就是通过wow.js和动画库来...
随着浏览器的兼容性增强，css3动画特效运用也越来越广，通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果，通过设置调整可以改变动画的风格、延迟、偏移量等。优美尚品精致版企业站主题就增加了这种效果，改变了传统的直显示模式，使页面不单调而更加生动，吸引浏览者的视点，增强浏览体验。
今天介绍的就是通过wow.js和动画库来实现
使用方法：
第一步引用动画库 Animate.css 和 wow.js
<link rel="stylesheet" href="css/animate.css"> <script src="js/wow.js"></script>
第二步页面html代码
<div class="wow fadeInLeft"></div> <div class="wow fadeInRight"></div>
也可以给需要动效的html元素加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：
<div class="wow fadeInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow fadeInRight" data-wow-offset="10" data-wow-iteration="10"></div>
第三步JavaScript
new WOW().init();
如果需要自定义配置
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();参数
| 属性/方法 | 类型 | 默认值 | 说明 |
| boxClass | 字符串 | ‘wow’ | ‘wow’需要执行动画的元素的 class |
| animateClass | 字符串 | ‘animated’ | ‘animated’animation.css 动画的 class |
| offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
| mobile | 布尔值 | true | 是否在移动设备上执行动画 |
| live | 布尔值 | true | 异步加载的内容是否有效 |
