近期的项目需要一些动画来提升用户体验,吸引用户注意力。Animate.css是个不错的选择,如果再加上wow.js那就很完美了

用wow.js配合animate.css来让页面滚动变得有趣起来~

1、官方文件下载地址

Animate.css 官网: https://daneden.github.io/animate.css/

bootcdn CDN服务: https://www.bootcdn.cn/animate.css/

wow.js官网:http://mynameismatthieu.com/WOW/

bootcdn CDN服务:http://www.bootcdn.cn/wow/

wow.js依赖animate.css,不需要jQuery;animate.css是纯css动画 !

2、使用方法

1.引入animate.css文件

在页头head中添加如下代码:

<link rel="stylesheet" href="css/animate.min.css">
2.引入wow.js文件

在引入的css文件下方添加如下代码:

<script src="wow.min.js" type="text/javascript"></script>
3.HTML代码
<div class="wow fadeInLeft"></div>
<div class="wow fadeInRight"></div>

可直接在标签上加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如下:

<div class="wow fadeInLeft" data-wow-duration="2s" data-wow-delay="4s"></div>
<div class="wow fadeInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

注意:wow类名必须加在动画类名之前!

3.JavaScript代码
new WOW().init();

自定义配置,可如下使用:

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();
属性/方法 类型 默认值说明
boxClass 字符串 'wow' 需要执行动画的元素的 class
animateClass 字符串 'animated' animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效


需要服务器吗?

技术成就梦想,细节成就品质。