wow.js插件，让滚动动画更简单，让生活更美好

zhangli0421

已于 2022-05-18 15:47:39 修改

阅读量460

点赞数

文章标签： javascript

于 2022-05-18 11:30:33 首次发布

本文链接：https://blog.csdn.net/zhangli0421/article/details/124838911

版权

这段代码展示了如何在HTML中结合animate.min.css和wow.js库创建动态的页面元素动画。通过添加`wow`和特定的动画类，如`fadeInUpBig`和`swing`，实现了元素的淡入和摇摆效果。建议将样式表和脚本文件下载到本地以确保在离线状态下也能正常工作。在Vue项目中使用Wow.js时，可以参照提供的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，我相信你肯定可以看懂。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.item {
				width: 200px;
				height: 200px;
				margin: 30px auto;
				background-color: red;
			}

			.item2 {
				width: 200px;
				height: 200px;
				margin: 30px auto;
				background-color: red;
			}

			.box {
				width: 500px;
				height: 2000px;
				background-color: royalblue;
				margin: 20px auto;
			}
		</style>
		<link rel="stylesheet" href="http://zhangli6.top/texiao/animate.min.css">
		<script src="http://zhangli6.top/texiao/wow.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 		  wow : 添加wow演示, 
		  fadeInUpBig : 向上快速淡入,
		  data-wow-delay : 动画开始前延迟 0.3秒 -->

		<div class="box">
			<li class="item wow animated fadeIn">啊哈哈哈</li>
		</div>
		<div class="box">
			<li class="item wow swing animated">啊哈哈哈</li>
		</div>

		<li class="item2 wow swing animated ">啊哈哈哈</li>

	</body>
	<script type="text/javascript">
		new WOW().init();
	</script>
</html>