原由
这篇教程只是给前端看的,简单介绍如何简单实现网页动起来效果。
准备
使用
- 在页面引入js、css文件
- 启动wow.js,配置样式
说明:class wow
是wow.js 默认的标记,加上了这个,那这个元素就会动起来,必须设置样式为不可见,才能起到滚动到视窗出现突然出现的效果。
- 修改需要动画的元素
说明:
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>
转载请保留原文链接: https://zodream.cn/blog/id/39.html