`Wow.js` 是一个简单易用的 JavaScript 库,用于为网页元素添加一些简单的动画效果。以下是如何使用 `Wow.js` 的基本步骤:
1. 引入 Wow.js
你需要在你的 HTML 文件中引入 `Wow.js` 库。你可以从 [Wow.js 的 GitHub 仓库](https://github.com/matthieuaufroy/wow.js)下载,或者使用 CDN 链接。
使用 CDN 的方式如下:
```html
```
2. 初始化 Wow.js
在引入 `Wow.js` 库之后,你需要在你的 JavaScript 代码中初始化它。
```javascript
new WOW().init();
```
这段代码会创建一个 `Wow` 对象,并调用它的 `init` 方法来初始化动画。
3. 添加动画效果
你可以在 HTML 中为任何你想添加动画效果的元素添加 `data-wow-` 属性。以下是一些可用的属性:
`data-wow-duration`: 动画持续时间(以毫秒为单位)。
`data-wow-delay`: 动画延迟时间(以毫秒为单位)。
`data-wow-offset`: 在窗口滚动之前开始动画的像素数。
`data-wow-iteration`: 动画播放次数。
例如:
```html
```
这个例子中,`div` 元素在页面加载后1秒内逐渐上升,并且延迟1秒开始动画。
4. 自定义配置
如果你需要更复杂的配置,可以在初始化 `Wow` 对象时传入一个配置对象。
```javascript
new WOW({
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: true, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
callback: function(element) {
// the callback is fired every time an animation is started