原由
这篇教程只是给前端看的，简单介绍如何简单实现网页动起来效果。
准备
使用
- 在页面引入js、css文件
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>123
- 启动wow.js，配置样式
<style>
.wow {
visibility: hidden;
}
</style>
<script>
new WOW().init();
</script>123456789
说明：class wow 是wow.js 默认的标记，加上了这个，那这个元素就会动起来，必须设置样式为不可见，才能起到滚动到视窗出现突然出现的效果。
- 修改需要动画的元素
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
123
说明：
class wow 是wow.js 默认的标记，可以修改。
class slideInLeft 是 Animate.css 的其中一种动画绑定的class。
data-wow-duration 是指动画执行时间，可以不设，Animate.css 自带默认
data-wow-delay 是指延迟多久执行动画，可以不设，Animate.css 自带默认
最终页面
<link rel="stylesheet" href="animate.min.css">
<style>
.wow {
visibility: hidden;
}
</style>
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInLeft"></section>
<script src="wow.min.js"></script>
<script>
new WOW().init();
</script>123456789101112131415
转载请保留原文链接： https://zodream.cn/blog/id/39.html