[筆記] 網頁切版直播班 2020 春季班 – 第七週

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

第七週課程重點

CSS3 Animation 視差滾動

Animate.css (動畫效果)

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

Transform

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

AOS(視差滾動觸擊)

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

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


經驗談

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


切版練習結果

目前改放置到 Github Pages 上,歡迎大家前往觀看。
網址:https://github.com/andy922200/HexSchool2020Spring


相關文章

按讚加入粉絲團

延伸閱讀