---
# System prepended metadata

title: 第七週
tags: [網頁切版直播班 - 2024 夏季班]

---

本文件連結：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/

關於影格的概念：

![image](https://hackmd.io/_uploads/SkNjKPsYR.png)


## 中場休息

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)

## 第七週主線任務

- 第七週 - 視差滾動

**第七週作業，將你之前第一~六週做的網站套用視差滾動即可**