# 第七堂 網頁動態
本頁連結：https://hackmd.io/PcPpCppqRMC50_oqzcDIUw
#### 1. AAPD 最後上車機會
#### 參加條件：
- 報名條件：完成第四堂課多頁式網頁 LV 2 （完成 4 頁含 RWD 且包含首頁）
- 組別人數：
- 一組 2-3 位工程師
⭐️ 立刻填寫 👉 [報名表單](https://docs.google.com/forms/d/e/1FAIpQLSdbab35oFx51jh5ET_PdPxYcdBmSXej1mSWaYZiuuYskha4Ig/viewform?usp=sharing&ouid=111848940554379858196)
### 2. 課程獎勵說明
- ~~50%：**8/4** 前超過 100 人挑戰成功，全班直播加碼一年（**～2027/8/30**）~~
- 60%：菁英班 DLC 切版影音課程
- 80%：菁英班直播一場（8/29） - 【原子化設計】Tailwind 使用教學（v4 +）
- 90%：抽 711 拿鐵 10 份
- 100%：切版直播班學霸獎狀
任務繳交期限：8/24(日) 23:59:59
更多說明可參考：https://hackmd.io/51ijGrBfRyWWHWciVmKNRQ
- [心得牆任務] - 8/11 開放承接任務
- [Google 表單連結] - [切版直播班回饋表單](https://docs.google.com/forms/d/e/1FAIpQLSdW2zcfuJqqUtc0GqgO1dhPxK0vV_wuzGYk-hXS2T9vK0gBUQ/viewform?usp=dialog)
---
本章介紹的範圍：
> 容器、內容 與 **裝飾**
## Transition + Transform
最常用的動態效果
### Transition
參考文件：https://developer.mozilla.org/zh-TW/docs/Web/CSS/transition
**常使用的屬性：**
- transition-property：對應 CSS 屬性，全部可選 all（但建議指定）
- transition-duration：時間長度
- transition-timing-function：套用的[時間方法](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
→ 上面三者可以合併撰寫
**套用技巧：**
1. 原始 Class 套用 transition 屬性
2. 偽類（[虛擬類別](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes)）加入變動後的效果
3. 時間建議落在 .25s ~ .5s 之間即可
範例：色彩變幻、旋轉
### Transform 2D 轉換
參考文件：https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform
**常使用的值：**
- translate(x, y)：水平、垂直位移
- scale(x, y)：水平、垂直縮放
- rotate(angle)：2D 旋轉
**樣式特性：**
- 不影響原始位置
- 會自動套用硬體加速，高效能（適合作為動態使用）
- 套用樣式以自身為基準（width、margin 等是以外層容器為基準）
**應用範圍：**
- 直接套用
- 搭配 transition
- 搭配 animation
## opacity 樣式
[基本範例](https://codepen.io/liao/pen/jObXwPN)
**樣式特性：**
- 可套用多個元素（外層套用，內層也會受到影響）
- 原始元素改變透明，但還是會佔用空間
## Animation
參考文件：https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations
**常使用的屬性：**（* 則是必要屬性、粗體字是推薦套用的值）
- animation-name*：對應 @keyframes 規則定義的動畫名稱 | 自定義名稱
- animation-duration*：動畫完成一個週期所需的時間 | **數字s**（秒）, 數字ms（毫秒）
- animation-timing-function：定義動畫的速度曲線 | **ease**, **linear**, ease-in, ease-out, ease-in-out, cubic-bezier()
- animation-delay：動畫開始前的延遲時間 | **0s**, 數字s, 數字ms
- animation-iteration-count：動畫播放的次數 | **1**, 數字, **infinite**
- animation-direction：定義動畫是否應該輪流反向播放 | **normal**, reverse, alternate, alternate-reverse
- animation-fill-mode：規定動畫在執行之前和之後如何將樣式應用於其目標 | **forwards**, backwards, both, none
- animation-play-state：定義動畫是運行還是暫停 | **running**, paused
- animation：所有動畫屬性的簡寫形式 | name duration timing-function delay iteration-count direction fill-mode play-state
Animation 延伸閱讀：
- https://www.casper.tw/css/2013/10/18/css-animation-setting/
- https://www.casper.tw/css/2013/10/17/css-animation-keyframe/
- 效能說明：https://www.casper.tw/css/2013/12/19/banner-animation-2/
1. [animate css](https://animate.style/)
2. 本週可以做到的範例：https://goldalles.com/
關於影格的概念：
## aos
[aos 官網](https://michalsnik.github.io/aos/)
- AOS 動態列表：https://github.com/michalsnik/aos#animations
### 載入步驟
**AOS Duration 時間超過 1s，請不要說是卡斯伯教的。**
**在 </body>前加上以下程式碼**
```
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
```
**AOS 單一設計**
- data-aos：指定要應用的動畫效果
- data-aos-offset：設定觸發動畫的偏移量（單位：像素）
- data-aos-delay：設定動畫開始前的延遲時間（單位：毫秒）
- data-aos-duration：設定動畫的持續時間（單位：毫秒）
- data-aos-easing：指定動畫的緩動函數
- data-aos-mirror：設定元素離開視口時是否鏡像動畫效果
- data-aos-once：控制動畫是否只播放一次
- data-aos-anchor-placement：定義動畫開始的參考位置（對應畫面呈現區塊）
**AOS 全域設計**
```
AOS.init({
// 全局設置：
disable: false, // 禁用 AOS，可接受值：'phone', 'tablet', 'mobile', boolean, expression 或 function | 預設：false
startEvent: 'DOMContentLoaded', // AOS 應該在哪個文檔事件上初始化 | 預設：'DOMContentLoaded'
initClassName: 'aos-init', // 初始化後應用的類名 | 預設：'aos-init'
animatedClassName: 'aos-animate', // 動畫時應用的類名 | 預設：'aos-animate'
useClassNames: false, // 如果為 true，將 data-aos 的內容作為類添加 | 預設：false
disableMutationObserver: false, // 禁用自動變異檢測（高級） | 預設：false
debounceDelay: 50, // 調整窗口大小時的去抖延遲（高級） | 預設：50
throttleDelay: 99, // 滾動頁面時的節流延遲（高級） | 預設：99
// 可以通過 data-aos-* 屬性在每個元素基礎上覆蓋的設置：
offset: 120, // 距離原始觸發點的偏移量（像素） | 預設：120
delay: 0, // 延遲，值從 0 到 3000，步長為 50ms | 預設：0
duration: 400, // 持續時間，值從 0 到 3000，步長為 50ms | 預設：400
easing: 'ease', // AOS 動畫的默認緩動 | 預設：'ease'
once: false, // 動畫是否應該只發生一次（向下滾動時） | 預設：false
mirror: false, // 元素在滾動經過時是否應該反向動畫 | 預設：false
anchorPlacement: 'top-bottom', // 定義元素相對於窗口的哪個位置應該觸發動畫 | 預設：'top-bottom'
});
```
- 學員範例調整：https://codepen.io/Wcc723/pen/vENxgBe
## AOS範例
- 文章左右偏移：https://codepen.io/bradtraversy/pen/bGbREWg
- 組合： https://codepen.io/amctagg1/pen/WVjGKw
- 完整範例：https://codepen.io/taohuh/pen/OZmgRV
## 補充，為你的網站快速套用輪播
最簡單的加入方式：
https://swiperjs.com/get-started#use-swiper-from-cdn
```
const swiper = new Swiper('.swiper', {
// Optional parameters
// direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
```
圖片顯示方法
```
.swiper {
width: 600px;
height: 300px;
}
img {
width: 100%;
object-fit: cover;
background-position: center center;
}
```
#### 改變輪播類型，套用各種效果
參考：https://swiperjs.com/demos
#### 老師，我還想要…
1. 參數：設定值，用來定義 Swiper 的運作
2. Methods、Event：進階細微操作 Swiper 的方法，例如當 “用戶進行特定操作後輪播至下一頁”、“當輪播下一頁時，觸發特定方法”
參考：https://swiperjs.com/swiper-api
> 本段過於進階，請同學依據自己的需求進行查看
>
### 額外補充
- Animation.css：https://animate.style/
- [hover.css](https://ianlunn.github.io/Hover/)
- [菁英團](https://courses.hexschool.com/courses/951862/lectures/20753023)
## 第七堂主線任務
挑選第一~六堂課程做的網站之一，來套用 JS 視差滾動即可
### 作業地雷
- 需注意載入 JS 或是 CSS 的順序，自己的 JS 要放在最下方
- 動態進場時不可以出現 x 軸與跑版的狀況
## 絕密，第八堂挑戰
[挑戰連結](https://www.figma.com/design/3bEeuchVUYwmA2PuHAxQVN/%E5%85%AD%E8%A7%92%EF%BD%9CZOBAA--%E6%97%85%E9%81%8A%E7%B6%B2%E7%AB%99--student-ver.%EF%BC%89?node-id=2-6972&p=f&t=mcWH7m3mkCfuw1AB-0)
Sign in with Wallet
Connect another wallet