Wow.js

Wow.js 是一个 JavaScript 库，可以在滚动页面时生成 CSS 动画。它将基于 CSS3 的动画集成到网站中。默认情况下，您可以通过触发 animate.css 来使用这些动画。它与 animate.css 配合良好，可提供出色的跨浏览器体验。

Animate CSS 库充满了 CSS3 中的各种完整动画集。它还集成了 jQuery 代码，为动画提供 CSS 类和一些模板。如果 wow.js 与其集成，您可以更精确地控制动画。它还可以告诉您动画重复了多少次、动画的持续时间、动画在每个进度阶段的延迟等。

wow.js 的优点

与 Scrollorama 等 JavaScript 视差插件相比，它通常是一个更小的插件。Scrollorama 用于执行一些复杂的动态动画，但它太笨重了，不适合使用。

wow.js 的另一个优点在于其一项功能。假设您选择使用 Animate CSS 库。在这种情况下，您可以为视口外的任何 HTML 元素设置动画。每当您向下滚动网页以查看该 HTML 元素时，动画可能已完成或结束。因此，使用 wow.js 和 Animate CSS 库，您在向下滚动页面时会错过的 CSS 动画将自动启动并可见。为了说明，请参考 wow.js 库的主页以了解所说内容。

设置

要设置 wow.js，您需要借助 bower。安装 bower 后，键入以下命令。

基本用法

要在 HTML 代码中使用 wow.js，请添加以下类部分，如下面的示例所示。

要将 wow.js 与 CSS 文件集成，请添加以下代码片段。

为了让流程继续进行，您需要添加并使用 JavaScript 对其进行初始化。方法如下所示。

如果您想链接其他 CSS 动画，您需要通过添加以下代码片段来更改 wow.js 设置。

上面的链接并未激活 wow.js。要激活此链接，您需要添加一些将完成工作的 JavaScript。

使用 CSS 揭示动画

要使任何元素可揭示，您需要将 CSS 类添加到所需的 HTML 元素中。完成此操作后，它将保持不可见。只有当页面向下滚动时，它才会可见。如下所示

动画样式

要选择动画样式，您需要从 Animate.css 库中选择一个元素并将其添加到 HTML 元素中的类中，如下所示

此时，每当您提示用户滚动时，动画就会自动显示。

高级选项

还有一些您可能不熟悉的高级选项。在 wow.js 中，一些动态动画组件用于复杂项目。下面将讨论其中一些。

Data-wow-duration：动画的持续时间已更改。

Data-wow-delay：在动画开始前添加延迟。

Data-wow offset：组件之间的规定距离。

Data-wow-iteration给出动画应重复的次数。

所有这些效果都可以通过下面的示例代码片段展示。

自定义设置

boxClass：当用户滚动经过隐藏的框时，会显示该类名。

animateClass：它会触发 CSS 类名中存在的动画。

Offset：它显示隐藏框顶部与浏览器视口底部之间的距离。简单来说，当您滚动并到达网页上的某个距离时，隐藏框的距离就会立即显示。

Mobile：在移动设备上打开/关闭 WOW.js。

Live：它会不断检查 WOW 元素是否存在于页面上。

所有这些自定义项都可以通过下面的示例代码片段一起表示。

总结

Wow.js 只是一个简单的动画库，可用于将一些通用和自定义动画导入网页。除了使用 wow.js 库之外，还有许多其他选项，但如果您构建基于 Web 平台的应用程序，它是创建一些动态动画的最佳库。在本教程中，您通过将其与您的 HTML、CSS 和纯 JavaScript 协同工作，了解了所有必需的设置和样式技术。Wow.js 也适用于 ReactJS、AngularJS 等其他库，稍后将进行讨论。