首页 > 文章 > web前端 > 使用 HTML、CSS 和 AOS.js 在滚动上添加动画

使用 HTML、CSS 和 AOS.js 在滚动上添加动画

PHPz转载: 2023-08-31 15:49:021451浏览

AOS.js（滚动动画）是一个提供动画的 JavaScript 库，只需更改所需的 div 标记中的类名称，就可以更轻松地添加大量动画添加动画。虽然有不同的动画 JavaScript 库，但 AOS.js 可能是其中最简单的。

在本教程中，我们将借助不同示例探索可以在 AOS.js 中使用的不同类型的动画。

我们将探索的第一类动画是褪色动画。在此之前，我们首先需要确保 aos.css 和 aos.js 在我们的代码中可用，并且我们可以通过以下方式获取它们： CDN 链接。

您只需将以下代码片段粘贴到 HTML 代码中的

标记末尾即可。

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

上面的代码片段将有助于获取 css 文件，为了获取 js 文件，我们需要在末尾粘贴如下所示的 CDN 代码片段HTML 代码中的 body 标记。

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
   AOS.init();
</script>

在 HTML 代码中添加上述两个代码片段后，我们就可以在代码中使用 AOS。

使用 AOS.js 淡入淡出动画

淡入淡出动画模拟淡入淡出行为，总共可以实现 8 种不同的动画。这些是 -

淡入淡出
淡入淡出
向左淡出
向右淡出
向左淡入
向右淡出
向左淡入淡出
向左淡入淡出

现在让我们在一个简单的 HTML-CSS 示例中一一使用它们。

下面的代码片段是我们将对所有上述淡入淡出动画进行更改的唯一部分。

<div id="main">
   <div data-aos="fade-up">Something up!</div>
</div>

在上面的代码中，我们将值作为“fade-up”传递给data-aos属性，并且在所有淡入淡出的情况下，只有这个值会被改变。

index.html

现在，让我们考虑以下 index.html 文件，我们将在其中执行“淡出” 动画。

示例




   
   
   
   AOS - Animation
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   
      Something Up!
   
   
   <script>
      AOS.init();
   </script>

当您在浏览器中运行上述代码时，您应该会看到一个 div ，其中包含文本“Something Up!”以淡入淡出的动画朝上方向出现。

同样，如果我们想要执行淡入淡出动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="fade-down">Something down!</div>
</div>

我们只需要将index.html文件中的替换为上面的div即可获得淡入淡出动画。

对于向左淡出，代码片段如下所示。

<div id="main">
   <div data-aos="fade-left">Something left!</div>
</div>

对于淡入淡出，代码片段如下所示。

<div id="main">
   <div data-aos="fade-right">Something right!</div>
</div>

对于Fade-up-left，代码片段如下所示。

<div id="main">
   <div data-aos="fade-up-left">Something up left!</div>
</div>

对于Fade-up-right，代码片段如下所示。

<div id="main">
   <div data-aos="fade-up-right">Something up right!</div>
</div>

对于向左淡入淡出，代码片段如下所示。

<div id="main">
   <div data-aos="fade-down-left">Something down left!</div>
</div>

对于Fade-down-right，代码片段如下所示。

<div id="main">
   <div data-aos="fade-down-right">Something down right!</div>
</div>

至此，我们可以断定AOS中的淡入淡出动画已经完成。

使用 AOS.js 翻转动画

翻转动画模拟翻转行为，总共可以实现 4 种不同的动画。这些是 -

上翻
下翻
向左翻转
右翻

现在让我们在一个简单的 HTML-CSS 示例中一一使用它们。

index.html

让我们考虑以下 index.html 文件，我们将在其中执行“向上翻转” 动画。




   
   
   
   AOS - Animation
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   
      Flip Up!
   
   
   <script>
      AOS.init();
   </script>

当您在浏览器中运行上述代码时，您应该会看到一个带有文本“Flip Up!”的 div。以向上方向的翻转动画出现。

同样，如果我们想要做向下翻转动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="flip-down">Flip down!</div>
</div>

对于左翻，代码片段如下所示。

<div id="main">
   <div data-aos="flip-left">Flip left!</div>
</div>

对于右翻，代码片段如下所示。

<div id="main">
   <div data-aos="flip-right">Flip right!</div>
</div>

使用 AOS.js 缩放动画

缩放动画模拟缩放行为，总共可以实现 8 种不同的动画。这些是 -

放大
放大
缩小
向左放大
向右放大
缩小
放大
缩小
向左缩小
向右缩小

现在让我们在一个简单的 HTML-CSS 示例中一一使用它们。

index.html

让我们考虑以下 index.html 文件，我们将在其中执行“放大”动画。

示例




   
   
   
   AOS - Animation
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   
      Zoom in!
   
   
   <script>
      AOS.init();
   </script>

当我们在浏览器中运行上述代码时，我们应该会看到一个 div，其缩放动画中的 Text Zoom 朝上。

同样，如果我们想要执行放大动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="zoom-in-up">Zoom in up!</div>
</div>

对于放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-in-down">Zoom in down!</div>
</div>

对于向左放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-in-left">Zoom in left!</div>
</div>

对于向右放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-in-right">Zoom in right!</div>
</div>

同样，如果我们想要缩小动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="zoom-out">Zoom out!</div>
</div>

对于放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-up">Zoom out up!</div>
</div>

对于缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-down">Zoom out down!</div>
</div>

对于向左缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-left">Zoom out left!</div>
</div>

对于向右缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-right">Zoom out right!</div>
</div>

使用 AOS.js 进行多重设置动画

在上面的所有示例中，我们使用的是单个动画，没有其他选项，但 AOS.js 也允许我们使用带有动画的选项。例如，考虑这样的情况：我们想要一个淡入淡出动画，但持续时间为某个时间。

在下面的代码片段中，我们将创建一个带有持续时间的淡入淡出动画。

<div id="main">
   <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div>
</div>

结论

在本教程中，我们演示了如何借助 AOS.js、HTML 和 CSS 创建滚动动画。

以上是使用 HTML、CSS 和 AOS.js 在滚动上添加动画的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：探索 JavaScript 中 async 和 wait 的威力下一篇：5 个简化网页设计的晦涩 JavaScript 库

查看更多