本文件連結：https://hackmd.io/aaoPEWwWSb-C2BoE-j1puA
# 第七週
- 提醒老師，要分享第八週的設計稿
- 完課獎勵與心得牆
- [完課獎勵](https://hackmd.io/6cTcBIoPQHWY_mD6lTRZ_A)
- [心得牆素材](/WRYEN7caTdyRBsvo5InYZg)
- [「切版班限定」React 專題班專屬報名機會](https://discord.com/channels/801807326054055996/1242306769724768336/1273458534880907328)
---
本章介紹的範圍：
> 容器、內容 與 **裝飾**
## 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/
關於影格的概念：
## 中場休息
1. GSAP 章節
2. 直接 Demo 視差滾動
3. 後續學習方向：
- 方案一：有迫切學會技能學員：[JS 直播班，老學員優惠](https://www.hexschool.com/courses/js-training.html)
- 方案二：依照自己步調學習：[JS 組合包](https://www.hexschool.com/courses/?category=conbined-courses&combind=z_js-plus_js-core_vue3)
## 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/liao/pen/BaovZRg
## AOS範例
- 文章左右偏移：https://codepen.io/bradtraversy/pen/bGbREWg
- 組合： https://codepen.io/amctagg1/pen/WVjGKw
- 完整範例：https://codepen.io/taohuh/pen/OZmgRV
## 額外補充
- Animation.css：https://animate.style/
- [hover.css](https://ianlunn.github.io/Hover/)
- [菁英團](https://courses.hexschool.com/courses/951862/lectures/20753023)
## 第七週主線任務
- 第七週 - 視差滾動
**第七週作業，將你之前第一~六週做的網站套用視差滾動即可**
Sign in with Wallet
Connect another wallet