wow.js 是一个用于在滚动时触发 CSS 动画的库。与其结合使用的常见库是 animate.css，它提供了一组预先定义的 CSS 动画。
要在普通 HTML 中使用 wow.js，您可以按照以下步骤操作：
1. 引入相关库
在HTML文档的<head>部分引入 animate.css 和 wow.js。您可以从 CDN 或者从下载的文件中引入。
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- WOW.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
2. 初始化 wow.js
在页面的底部或者文档加载完成后初始化 WOW。
<script>
new WOW().init();
</script>
3. 添加动画
现在，为您希望动画化的元素添加 wow 类以及所需的 animate.css 类。
例如，要让一个元素从左侧滑入：
<div class="wow slideInLeft">Your content here</div>
或者，如果您想要的效果是一个淡入效果：
<div class="wow fadeIn">Your content here</div>
您还可以添加额外的属性，如 data-wow-duration、data-wow-delay 等来控制动画的时长和延迟。
<div class="wow fadeIn" data-wow-duration="2s" data-wow-delay="1s">Your content here</div>
4. 调整 wow.js 设置
如果需要，您可以在初始化 WOW 时提供参数以自定义其行为：
<script>
new WOW({
boxClass: 'wow', // 动画元素CSS类 (默认是 wow)
animateClass: 'animated', // 动画CSS类 (默认是 animated)
offset: 0, // 在元素显示之前触发动画的距离 (默认是 0)
mobile: true, // 在移动设备上触发动画 (默认是 true)
live: true, // 对异步加载的内容作用 (默认是 true)
callback: function(box) {
// 在元素显示时的回调函数
},
scrollContainer: null, // 可选的滚动容器选择器，从这个容器内的滚动而不是window
}).init();
</script>
现在，当您滚动页面时，元素应该会在它们出现在视图中时触发动画。
