做网站|网站建设，就上易助科技网

您现在的位置:

技术文档详情

滚动页面时触发CSS 动画效果的js插件：WOW.js

来源：易助科技浏览量：41收藏

简介

在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。该插件需要animate.css配合使用。

使用

1. 引入animate.css 、WOW.js文件

2. HTML

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

3. 调用

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	异步加载的内容是否有效

做网站|网站建设，就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！