###### tags: `網頁切版直播班 - 2021 夏季班` `六角筆記王`

# 透過CSS做出視差滾動(Parallax Scrolling)
[來源](https://hackmd.io/@JHOUJHOU/week7) / [第七週作業](https://codepen.io/jhoujhou-the-decoder/full/qBjWBwz)
## 簡易說明
當網頁在上下捲動時，讓圖片或div會以不同速度移動產生視覺動畫效果。

## animation屬性介紹

### 基本的視差滾動
> 看過介紹好像也還不知道是甚麼，直接來看[範例](https://codepen.io/jhoujhou-the-decoder/pen/OJgLVre?editors=1100)。
<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/jhoujhou-the-decoder/embed/OJgLVre?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jhoujhou-the-decoder/pen/OJgLVre">
</a> by JHOUJHOU (<a href="https://codepen.io/jhoujhou-the-decoder">@jhoujhou-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

---

### :point_right:如何用CSS做到
> 一步一步解析CSS語法中樣式屬性分別代表的意義，進而知道如何產生視覺上效果動畫。

* **基本設定**
1. <font color="blue">@keyframes</font>說明要做動畫效果，然後動畫效果的名稱為<font color="blue">example</font>，在div裡設定
<font color="blue">animation-name</font>裡去設定相同的名稱<font color="blue">example</font>去註冊這個效果。
2. <font color="blue">animation-duration</font>是設定動畫效果幾秒時間，如上範例中example中設定從(<font color="blue">from</font>)的位置到(<font color="blue">to</font>)的位置總共花多少秒時間執行。

* **進階設定**
1. 針對移動秒數更精準，<font color="blue">@keyframes</font>設定百分比讓div所移動的位置，再透過<font color="blue">animation-duration</font>設定秒數讓div依自己想在幾秒到那個位置，如下圖1秒是跑25%位置，如是設定8秒，2秒是跑25%位置，以此類推。
2. <font color="blue">animation-delay</font>是當網頁載入後晚幾秒才觸發去跑動畫效果。(這是比較少再用的)
3. <font color="blue">animation-iteration-count</font>是當網頁載入後重複跑幾次動畫效果，如果想一直跑可以設定<font color="blue">infinite</font>。(看需求而設定去看是否要重複跑，因為一直跑會吃效能，真的要跑盡量做小範圍。)
4. <font color="blue">animation-fill-mode</font>是動畫效果預設從那個位置開始執行。
- backwards: 預設會停第一個位置(0%)。
- forwards: 留在最後一個位置(100%)，通常會用在動畫會消失在螢幕外的。
- both: 含以上兩個功能，會從第一位置(0%)開始執行到最後一個位置(100%)。

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/jhoujhou-the-decoder/embed/ZEyzbya?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jhoujhou-the-decoder/pen/ZEyzbya">
</a> by JHOUJHOU (<a href="https://codepen.io/jhoujhou-the-decoder">@jhoujhou-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 常用的視差滾動套件
[Animate.css](https://animate.style/)

## transform屬性介紹
會在div元素區塊做動畫效果，不會影響到原本的區塊排版，蠻常使用到。可以觸發顯示卡3D加速，較用margin去推擠，效能比較好。
1. <font color="blue">rotate(20deg)</font>是旋轉移動角度多少。
2. <font color="blue">scale(3)</font>是放大倍率。
3. <font color="blue">translateY(100px)</font>是針對X或Y軸移動多少。
4. <font color="blue">all .8s</font>是當滑鼠滑過後幾秒會放大多少，如果只希望寬度放大<font color="blue">width .8s</font>。

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/jhoujhou-the-decoder/embed/oNwvbBj?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jhoujhou-the-decoder/pen/oNwvbBj">
</a> by JHOUJHOU (<a href="https://codepen.io/jhoujhou-the-decoder">@jhoujhou-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## opacity屬性介紹
設定元素透明度動畫效果，設定1為正常，0.5為半透明，0為隱藏消失。
<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/jhoujhou-the-decoder/embed/zYzOqmz?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jhoujhou-the-decoder/pen/zYzOqmz">
</a> by JHOUJHOU (<a href="https://codepen.io/jhoujhou-the-decoder">@jhoujhou-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 觀念小測驗
以上介紹的那些元素屬性部會影響到 box-model?(複選)
1. display:none(會使原本區塊消失)
2. transform
3. opacity
解答:選項2跟3。
> 補充說明: 比較冷門，visibility: hidden(開) | visiable(關)，也跟會在畫面上消失。

## The F2e活動
建議第四、六關卡，全部設計稿是CCO授權，可當作面試作品。
今年2021年會辦。10月JS技術直播班。
## [aos](https://hackmd.io/EhenRZbKTLujE-f7K0y12Q?view)套件介紹
> 支援響應式(RWD)
### 起手式
1. 載入AOS CSS樣式

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

2. 載入JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

3. animate.css只有做CSS 3動畫效果，與AOS差異?
- AOS會移動到即將到來的區塊，會動態加入class出現動畫效果。

### AOS如何客製化效果
將剛剛有載入的中間刪除做更換成以下語法

<script>
  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, // offset (in px) from the original trigger point
網頁往下滑時與視窗大小底端距離多長才會出現動畫笑過，但不要設0，感覺會跟沒動畫一樣。
  delay: 0, // values from 0 to 3000, with step 50ms
通常不會使用delay，如果你有設定太長時間，網頁就會太慢載入的感覺。
  duration: 400, // values from 0 to 3000, with step 50ms
400、600、800毫秒蠻長使用，建議不要超過1秒以上。
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down 
如設定ture，網頁從上到下的動畫只顯示1次。
  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

});
</script>

5. 在你想要的區塊加上AOS樣式設定

<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>