[筆記] 網頁切版直播班 2020 春季班 – 第七週 @地瓜大的飛翔旅程

章節連結

第七週課程重點

CSS3 Animation 視差滾動
Animate.css (動畫效果)
Transform
AOS(視差滾動觸擊)

經驗談
切版練習結果
相關文章

進入到第七週，主要是強調視差動畫效果該如何實現。透過關鍵影格(keyframe)以及 x,y,z 方向的移動，自然而然就可以完成基礎的動畫效果。

第七週課程重點

CSS3 Animation 視差滾動

annimatio-duration: 10s //執行過程秒數
@keyframe exmple{
   from {left:0px; top:0px}
   to {left:400px; top:0px}
}//關鍵影格，記得作用區塊要改用 position:relative，要綁定 animation-name

@keyframe exmple{ 
  0% {left:0px; top:0px} 
  100% {left:400px; top:0px} 
}//關鍵影格第二寫法，%乘上執行總秒數 = 出現變化的秒數
animation-iteration-count: 2 // 跑動次數，輸入 infinite 則為無限次
animation-fill-mode: forwards //backwards or both 最後停留的影格

annimatio-duration: 10s //執行過程秒數

@keyframe exmple{

from {left:0px; top:0px}

to {left:400px; top:0px}

}//關鍵影格，記得作用區塊要改用 position:relative，要綁定 animation-name

@keyframe exmple{

0% {left:0px; top:0px}

100% {left:400px; top:0px}

}//關鍵影格第二寫法，%乘上執行總秒數 = 出現變化的秒數

animation-iteration-count: 2 // 跑動次數，輸入 infinite 則為無限次

animation-fill-mode: forwards //backwards or both 最後停留的影格

Animate.css (動畫效果)

市面上最常見的動畫 css 框架，直接用 CDN 載入即可使用。
class 組成：animation-name (包含 name 和 keyframe) + animation 效果，所以至少要有兩個 class。建議：<方向性、動畫效果、延遲秒數> 各別一個 class，可以有較高的靈活性。

Transform

不會推擠到其他東西，而且也可以重疊。跟絕對定位相比，它可以開啟 GPU 加速，性能會比較好。

AOS(視差滾動觸擊)

Animate On Scroll Library 來載入 AOS 套件，可以簡單運用就達成多種動畫效果，只需要載入對應的 js, css 和 data-aos 。(以下取自於官方文檔)

// 預設樣式
AOS.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, // 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

});

// 預設樣式

AOS.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, // 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

});

客製化的 class，可以直接寫在所要作用的對象上

經驗談

1. 何時使用 translate 或絕對定位？
如果你是要排版的話，多半使用絕對定位；若是要動畫效果，多半建議用 translate
2. opacity 可以用於製作淡入、淡出等半透明效果
display:none (完全消失), visibility: hidden (消失但保留空間), opacity: 0 (消失但保留空間)