資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 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">Something up!</div> </div>
在上面的程式碼中，我們將值作為“fade-up”傳遞給data-aos屬性，在所有淡入淡出的情況下，只有此值將被更改。
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，它會以淡入動畫向上出現。
類似地，如果我們想要執行淡出動畫，我們可以使用下面程式碼片段中顯示的<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">Something up left!</div> </div>
對於Fade-up-right，程式碼片段如下所示。
<div id="main"> <div data-aos="fade-up-right">Something up right!</div> </div>
對於Fade-down-left，程式碼片段如下所示。
<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 種不同的動畫可以透過它實現。它們是：
flip-up
flip-down
flip-left
flip-right
現在讓我們在一個簡單的 HTML-CSS 示例中逐一使用它們。
index.html
讓我們考慮以下index.html檔案，我們將在其中執行“flip-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="flip-up">Flip Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
當您在瀏覽器中執行以上程式碼時，您應該會看到一個包含文字“Flip Up！”的div，它會以翻轉動畫向上出現。
類似地，如果我們想要執行翻轉向下動畫，我們可以使用下面程式碼片段中顯示的<div>。
<div id="main"> <div data-aos="flip-down">Flip down!</div> </div>
對於Flip-left，程式碼片段如下所示。
<div id="main"> <div data-aos="flip-left">Flip left!</div> </div>
對於Flip-right，程式碼片段如下所示。
<div id="main"> <div data-aos="flip-right">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檔案，我們將在其中執行“zoom-in”動畫。
示例
<!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>
當我們在瀏覽器中執行以上程式碼時，我們應該會看到一個包含文字“Zoom”的div，它會以縮放動畫向上出現。
類似地，如果我們想要執行zoom-in-up 動畫，我們可以使用下面程式碼片段中顯示的<div>。
<div id="main"> <div data-aos="zoom-in-up">Zoom in up!</div> </div>
對於Zoom-in-down，程式碼片段如下所示。
<div id="main"> <div data-aos="zoom-in-down">Zoom in down!</div> </div>
對於Zoom-in-left，程式碼片段如下所示。
<div id="main"> <div data-aos="zoom-in-left">Zoom in left!</div> </div>
對於Zoom-in-right，程式碼片段如下所示。
<div id="main"> <div data-aos="zoom-in-right">Zoom in right!</div> </div>
類似地，如果我們想要執行zoom-out 動畫，我們可以使用下面程式碼片段中顯示的<div>。
<div id="main"> <div data-aos="zoom-out">Zoom out!</div> </div>
對於Zoom-out-up，程式碼片段如下所示。
<div id="main"> <div data-aos="zoom-out-up">Zoom out up!</div> </div>
對於Zoom-out-down，程式碼片段如下所示。
<div id="main"> <div data-aos="zoom-out-down">Zoom out down!</div> </div>
對於Zoom-out-left，程式碼片段如下所示。
<div id="main"> <div data-aos="zoom-out-left">Zoom out left!</div> </div>
對於Zoom-out-right，程式碼片段如下所示。
<div id="main"> <div data-aos="zoom-out-right">Zoom out right!</div> </div>
使用 AOS.js 實現多設定動畫
在我們上面所有的示例中，我們都只使用了一種動畫，沒有任何其他選項，但 AOS.js 也允許我們在動畫中使用選項。例如，考慮我們想要一個fade-down動畫，但希望它持續一段時間的情況。
在下面的程式碼片段中，我們將建立一個fade-down動畫，併為其附加一個持續時間。
<div id="main"> <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div> </div>
結論
在本教程中，我們演示瞭如何使用 AOS.js、HTML 和 CSS 在滾動時建立動畫。
3K+ 閱讀量
