iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 1

前言

在資訊科技的發展下,網頁的技術之外有相當多人開始專注於「體驗」與「互動」,同步帶起 UI 設計、UX 研究等專注於使用者互動行為的討論,而「體驗」與「互動」在網頁中,除了靜態圖像的視覺語言外,動態的呈現也是重點,常見應用類型包含 Loading 動態特效、menu 的展開與收合、滑鼠與網頁元件的互動效果,只要安排得宜,不論簡單或複雜都能有效提升互動體驗。

網頁技術部分除了 JavaScript 外,CSS Animation 的發展,讓網頁的動態特效能以更少的效能資源達成,也讓動態特效更容易開發;同時,webGL 等技術發展已相當成熟,且有相當多的作品與案例應用此技術,網頁瀏覽器能處理 2D、3D 等更為複雜的圖形,以此技術延伸,將能創造更複雜、具有身歷其境的體驗,甚至 Web VR、Web AR、WebXR 等技術出現,可以想見未來的網頁體驗將會更加真實。

除了剛剛提到的CSS之外,現今有相當多專門處理繪圖、動畫的 JavaScript 函式庫,本系列不免俗地會從最基本的CSS Animation開始,並挑選幾個函式庫實做練習,從做中學,紀錄相關的學習筆記整理。

就讓我們開始 Web Motion 之旅吧!


下一篇
讓我們從 Motion 設計開始
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言