Revealing content on scroll

Web动画的一种常见用途是在浏览器滚动时向元素添加动作。在本章中，我们将了解如何执行此操作。

这是 today’s demo on CodePen。尝试向下滚动页面，看看引用文本和猫是如何淡入的。

Wow.js

当您的鼠标滚动到某个点时，许多站点会触发自定义动画。他们或者开始播放视频、触发复杂的关键帧动画，或只是将项目淡入到某位置来吸引访问者的注意力。

每一种情况通常是，当元素在屏幕上可见时 JavaScript 为其添加一个 class 类来控制其动作。然后我们可以将动画附加到 class 中，当浏览器滚动时动画从正确的时间开始。

有许多 JavaScript 选项可以添加类，我发现了一个好用的是 Wow.js。让我们用 Wow.js 来创建一个简单的例子，当我们滚动鼠标时，内容会淡入视图。

“>

使用 Wow.js 涉及两个步骤。第一个是 download the JavaScript。将 wow.min.js 文件放在项目的 JavaScript 文件夹中。下一步是从 HTML 中引用此文件：

<script src="javascripts/wow.min.js"></script>

（假设您的文件夹名为 javascripts - 根据需要更改）

然后，我们使用以下命令调用 JavaScript（将其粘贴到上一个代码之后）：

<script>
 new WOW().init();
</script>

我们现在可以为我们的内容添加 “wow” 类，Wow.js 将负责确定我们的内容是否显示。

如果我们有一个想要在元素上添加滚动动画，首先要确保它具有 “wow” 类：

<p class="wow">...</p>

这意味着当浏览器将此内容滚动到屏幕上时，Wow.js 会向该 class 添加 “animated”，如下所示：

<p class="wow animated">...</p>

如果我们的 p.animated 元素上有动画，动画只会在添加这个 class 时发生。

对于我们的示例，我们将使用 wow 样式隐藏所有元素，并在 animated 时显示它们。首先，我们隐藏它们：

.wow {
  opacity: 0;
  transition: all 0.5s 0.5s ease-out;
}

我们在这里也应用了一个 transition，这样元素就会淡入。请注意第二个0.5s。在这种情况下，我们还增加了半秒的“延迟”。这样元素在淡入之前能正确滚动到视图中。

下一段代码定义了添加 Wow.js 的 animated 时元素的外观：

.animated {
  opacity: 1;
}

现在我们应该会遇到这样的情况，当用户滚动时，项目会淡入 Animate.css。

Wow.js 与 CSS 框架 Animate.css 配合使用效果更好。我还没有在这个例子中使用过，因为理解如何创建我们自己的 transitions 是有好处的，但是值得看一下 Animate.css 提供的开源的 transitions。

在 this example 我使用了 Animate.css。请注意 CSS 中没有 animations 或 transitions。相反，我在HTML中添加了一个 class 告诉 Animate.css 要应用哪个动画：

<section class="image wow bounceInUp">

bounceInUp 是对 Animate.css 的许多内置动画之一的引用。如果在示例中的 CSS 部分选择 “cog”，您将看到我在 “External CSS file” 下引用了 Animate.css 框架。

通常情况下一般先隐藏内容再使用 JavaScript 显示内容。人们可能因为某种工作原因对 JavaScript 并不熟悉。诸如 Modernizr 之类的脚本可用于处理此问题。它会在文档正文中添加一个 js 类，然后我们可以将它们添加到我们的样式中。

这个 demo 中包含了 Modernizr。

让内容逐渐淡出是一个很好的开始，但是您是否可以想象用这种方式来为您的设计和网站增加价值？当用户浏览时，请注意滚动出内容时开始动画的时间。

它何时起作用，什么时候又不那么好用？