使用 HTML、CSS 和 AOS.js 添加滚动动画
AOS.js(滚动动画)是一个提供动画的 JavaScript 库，只需更改要添加动画的 div 标记中的类名，即可更轻松地添加大量动画。虽然有不同的动画 JavaScript 库，但 AOS.js 可能是其中最简单的。
在本教程中，我们将借助不同示例探索可以在 AOS.js 中使用的不同类型的动画。
我们将探索的第一类动画是淡入淡出动画。在执行此操作之前，我们首先需要确保 aos.css 和 aos.js 在我们的代码中可用，并且我们可以通过 CDN 链接的帮助获取它们。
您只需将以下代码片段粘贴到 HTML 代码中 <head> 标记的末尾即可。
<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 种不同的动画可以实现。这些是 −
fade-up
fade-down
fade-left
fade-right
fade-up-left
fade-up-right
fade-down-left
fade-down-left
现在让我们在一个简单的 HTML-CSS 示例中逐一使用它们。
下面的代码片段是我们将对上述所有淡入淡出动画进行更改的唯一部分。
<div id="main">
<div data-aos="fade-up">有事发生!</div>
</div>
在上面的代码中，我们将值传递给 data-aos 属性作为"fade-up"，并且在所有淡入淡出的情况下，只有这个值会改变。
index.html
现在，让我们考虑以下 index.html 文件，我们将在其中执行 "fade-up" 动画。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="fade-up">Something Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
在浏览器中运行上述代码时，您应该会看到一个带有文本"Something Up!"的 div，该文本以向上方向的淡入淡出动画形式出现。
同样，如果我们想要制作 fading-down 动画，我们可以使用下面代码片段中显示的 <div>。
<div id="main"> <div data-aos="fade-down">Something down!</div> </div>
我们只需要将 <div> 替换为在 index.html 文件中，使用上面的 div 来获得淡入淡出的动画。
对于 Fade-left，代码片段如下所示。
<div id="main"> <div data-aos="fade-left">Something left!</div> </div>
对于 Fade-right，代码片段如下所示。
<div id="main"> <div data-aos="fade-right">Something right!</div> </div>
对于 Fade-up-left，代码片段如下所示。
<div id="main"> <div data-aos="fade-up-left">左上角有东西!</div> </div>
对于 Fade-up-right，代码片段如下所示。
<div id="main"> <div data-aos="fade-up-right">右上角有东西!</div> </div>
对于 Fade-down-left，代码片段如下所示。
<div id="main"> <div data-aos="fade-down-left">向左下方有东西!</div> </div>
对于 Fade-down-right，代码片段如下所示。
<div id="main"> <div data-aos="fade-down-right">向右下方有东西!</div> </div>
由此，我们可以得出结论，AOS 中的淡入淡出动画已完成。
使用 AOS.js 的翻转动画
翻转动画模拟翻转行为，总共有 4 种不同的动画可以实现。这些是 -
向上翻转
向下翻转
向左翻转
向右翻转
现在让我们在一个简单的 HTML-CSS 示例中逐一使用它们。
index.html
让我们考虑以下 index.html 文件，我们将在其中执行 "向上翻转" 动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="flip-up">Flip Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
在浏览器中运行上述代码时，您应该会看到一个带有文字"向上翻转!"的 div，以向上方向翻转动画的形式出现。
同样，如果我们想要制作向下翻转动画，我们可以使用下面代码片段中显示的 <div>。
<div id="main"> <div data-aos="flip-down">向下翻转!</div> </div>
对于向左翻转，代码片段如下所示。
<div id="main"> <div data-aos="flip-left">向左翻转!</div> </div>
对于向右翻转，代码片段如下所示。
<div id="main"> <div data-aos="flip-right">向右翻转!</div> </div>
使用 AOS.js 实现缩放动画
缩放动画模拟缩放行为，总共可以实现 8 种不同的动画。这些是 −
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
现在让我们在一个简单的 HTML-CSS 示例中逐一使用它们。
index.html
让我们考虑以下 index.html 文件，我们将在其中执行"放大"动画。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
#body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="zoom-in" data-aos-duration="3000">Zoom in!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
当我们在浏览器中运行上述代码时，我们应该看到一个 div，其中的文本"Zoom"在向上方向缩放动画中。
同样，如果我们想要做放大动画，我们可以使用下面代码片段中显示的<div>。
<div id="main"> <div data-aos="zoom-in-up">放大!</div> </div>
对于向下放大，代码片段如下所示。
<div id="main"> <div data-aos="zoom-in-down">向下放大!</div> </div>
对于向左放大，代码片段如下所示。
<div id="main"> <div data-aos="zoom-in-left">向左放大!</div> </div>
对于向右放大，代码片段如下所示。
<div id="main"> <div data-aos="zoom-in-right">向右放大!</div> </div>
同样，如果我们想要实现缩小动画，我们可以使用下面代码片段中显示的<div>。
<div id="main"> <div data-aos="zoom-out">缩小!</div> </div>
对于缩小-放大，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-up">放大!</div> </div>
对于缩小-向下，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-down">缩小-向下!</div> </div>
对于缩小-向左，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-left">缩小-向左!</div> </div>
对于向右缩小，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-right">向右缩小!</div> </div>
使用 AOS.js 设置多个动画
在上面的所有示例中，我们都使用了单个动画而没有其他选项，但 AOS.js 也允许我们使用带有动画的选项。例如，考虑一下我们想要一个淡入淡出动画但其中有一段时间的持续时间的情况。
在下面的代码片段中，我们将创建一个淡入淡出动画，它有一个持续时间。
<div id="main"> <div data-aos="fade-down" data-aos-duration="3000"></div>>随着持续时间淡入淡出!</div> </div>
结论
在本教程中，我们演示了如何在 AOS.js、HTML 和 CSS 的帮助下在滚动时创建动画。
