# 第七週｜課程直播｜切版班 by Sz
###### tags: `Sz` `第七週` `直播筆記` `2021夏季切版班`

[【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg)

## 視差滾動
[animation 語法介紹](https://www.oxxostudio.tw/articles/201803/css-animation.html)
### 常用語法
- `animation-name`
- `animation-duration`
- `animation-delay`
- `animation-iteration-count`: 跑的次數
- 數字
- `infinite`（無限、吃效能）
- `animation-fill-mode`
- `backwards`，跑第一個影格
- `forwards`：留在最後一個影格
- `both`：第一個跟最後一個影格都會停住
- `none`（預設）：如果起始、終點都設在同一位置，會很滑順

### 範例

div{
    position:absolute;
    left:0;
    width:50px;
    height:50px;
    background:#f00;
    // 對應下面的 @keyframes
    animation-name:oxxo;
    animation-duration:2s;
}
@keyframes oxxo{
    from{
        left:0;
    }
    to{
        left:100px;
    }
}

### 多步驟的動畫

// 多步驟的動畫
@keyframes example {
  0%   {background-color:pink; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:50px;}
}

## 動畫 cheatsheet
https://animate.style/
可以代 class 進來用讚啦

## transform
不會影響到排版，都是照原本的空間

## transition vs animation
https://cssanimation.rocks/transition-vs-animation/
transition 過渡動畫
animation 真的很有意識要用的動畫（？）

## aos
https://michalsnik.github.io/aos/

利用 js 會動態加入 class
如果快要移動到該區塊，就會動態加入

<!-- body 尾部 -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
 AOS.init();
</script>

<!-- 在物件上加 -->
<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center">
  </div>

### 客製化
#### CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

#### JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

#### aos 初始化

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

### init 的客製化內容

AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // 單位px 滾輪滑到觸發動畫的距離 offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

once->true
已經執行過的動畫就不再重跑了

offset: 120
滑接近多少才會觸發

offset, duration 觸發時間改這兩個