首頁 >web前端 >js教程 >使用 HTML、CSS 和 AOS.js 在滾動上新增動畫

使用 HTML、CSS 和 AOS.js 在滾動上新增動畫

PHPz轉載: 2023-08-31 15:49:021546瀏覽

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

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 的威力下一篇：探索 JavaScript 中 async 和 wait 的威力

看更多