---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 JS 任務 Day24 - aos 動畫套用

## AOS 是什麼？
AOS（Animate On Scroll） 是一個輕量級的前端動畫套件，當元素進入畫面時，會自動套用動畫效果。只要加上 data-aos 屬性即可，非常適合製作滑動進場動畫、淡入淡出、放大縮小等效果。

## AOS 基本使用步驟
### 1️⃣ 引入 AOS：

<!-- AOS CSS -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

<!-- AOS JS -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

### 2️⃣ 初始化 AOS：

<script>
  AOS.init();
</script>

### 3️⃣ 套用動畫：

<div data-aos="fade-up">內容</div>

<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 aos 動畫套用 - 範例 1" src="https://codepen.io/yen-kg/embed/gbbaLJe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/gbbaLJe">
每日任務 - 🏅 aos 動畫套用 - 範例 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---

更多 AOS 套件相關，可以參考[官方網站](https://michalsnik.github.io/aos/)。

題目
---
請複製此[ CodePen 模板](https://codepen.io/yen-kg/pen/EaawNyd?editors=1010)，完成以下功能。
1. 請先練習載入 AOS 套件。
2. 初始化 AOS 並設定 duration 為 800ms、once 為 true。
3. 每張卡片使用不同的 data-aos 動畫效果，例如：fade-up、fade-down、zoom-in 等。
4. 加上 AOS 的 delay 屬性，讓卡片依序延遲出現。


## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--解答：
https://codepen.io/yen-kg/pen/jEEbVgR
-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:---------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/MYwwBLP?editors=1010) |
| 2 | 7Lun | [Day24-CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/ogXXPXx) |
| 3 | dean | [CodePen](https://codepen.io/ch933114/pen/wBaaEzm?editors=1010) |
| 4 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/xbGGQxa?editors=1010) |
|5|Saika|[Codepen](https://codepen.io/saika4501/pen/zxGGbzm?editors=1010)|
| 6 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/yyNNqqE) |
|7|蛋殼|[Codepen](https://codepen.io/weybrian/pen/ZYGbzMe)
| 8 | nora_zizi | [CodePen](https://codepen.io/Nora-Ch/pen/zxGGMYj) |
| 9 | Holly | [CodePen](https://codepen.io/LEE-HOLLY/pen/zxGvqRz?editors=1010) |
| 10 | pastor | [CodePen](https://codepen.io/peter_hung/pen/YPXyVzY) |
| 11 | zhe | [CodePen](https://codepen.io/dotheright/pen/zxGvwmd) |
| 12 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/GgJZowW?editors=1000) |
| 13 | 力文 | [CodePen](https://codepen.io/dizzydog-rgb/pen/GgJZowW?editors=1000) |
| 14 | jingle0900 |[CodePen](https://codepen.io/EvaLi0472/pen/xbGOPxR)|
| 15 | Leonard |[CodePen](https://codepen.io/hyyfjqra-the-sans/full/EajmWNj)|
| 16 | kelsonhouse |[Codepen](https://codepen.io/Kelson-House/pen/wBadjvy)|
| 17 | ninii |[Codepen](https://codepen.io/niiniiii/pen/ByNRqeo)|
| 18 | Jessie_Yu | [Codepen](https://codepen.io/bakyfkso-the-looper/pen/VYLMvgN)|
| 19 | jimmy.0706 |[Codepen](https://codepen.io/JimmyMao/pen/bNdoPvG?editors=1010)|
| 20 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/wBaydVy) |
| 21 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/xbGadzr?editors=1010) |

<!-- 【快速複製】
| 00 | user | [CodePen]() |

-->