WOW.js 使用教程

最新推荐文章于 2025-03-15 13:04:21 发布

僵尸C掉了我的脑子

最新推荐文章于 2025-03-15 13:04:21 发布

阅读量1.1k

点赞数 1

分类专栏：前端 CSS3 文章标签： wow.js animated animated.css 动画效果

本文链接：https://blog.csdn.net/qq_35457469/article/details/100101381

版权

前端同时被 2 个专栏收录

61 篇文章

订阅专栏

CSS3

2 篇文章

订阅专栏

使用方法

1、引入文件

wow.js依赖于animate.css，首先需要引入animate.css或者animate.min.css，然后引入wow.js文件

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.js"></script>

2、HTML

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

可以加入其他属性，如：

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

wow 是必须要添加的
slideInLeft 说明了动画的样式，是从左边滑动出来的
data-wow-duration （动画持续时间）
data-wow-delay （动画延迟时间）
data-wow-offset （元素的位置露出后距离底部多少像素执行）
data-wow-iteration （动画执行次数）这四个属性可选可不选

3、JavaScript

在js中写入如下代码：

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