iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

「這個按鈕點下去,換到這個頁面。」淡出淡入?下方上滑?淡出然後右方移入?
讓介面設計加分!頁面加上適當動態效果,加強使用者感受,也能運用時間差與效果呈現,彌補部分效能缺口帶來的不好體驗,運用一致性的視覺與動態效果,打造獨一無二的品牌風格。
-
嘗試創造網頁動態效果,從原生css、JavaScript開始,並使用Three.js、PixiJS等函式庫,從做中學的學習紀錄。

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文 團隊樂天Pie
DAY 1

前言

在資訊科技的發展下,網頁的技術之外有相當多人開始專注於「體驗」與「互動」,同步帶起 UI 設計、UX 研究等專注於使用者互動行為的討論,而「體驗」與「互動」在網...

2021-09-16 ‧ 由 Anna Cheng 分享
DAY 2

讓我們從 Motion 設計開始

Web Motion 動態特效網頁 Motion 一般翻作為「動態」,具有時間軸的概念,包含「動」的特性;不過目前人們談的「動態網頁」 Dynamic Web...

2021-09-17 ‧ 由 Anna Cheng 分享
DAY 3

Motion Graphic 製作的基本流程

不論是設計師在上機繪製前、工程師在實作開發前,都需要先完成設計、規劃好Spec,才能在製作上更加順利。因此,在開始做實作 Web Motion 前,需先從 Mo...

2021-09-18 ‧ 由 Anna Cheng 分享
DAY 4

Motion 效果基本項目

上一篇介紹了Motion Graphic製作的基本流程,接下來要分析一下幾個常用的動態效果。 Motion Graphic 是帶入時間軸概念的設計,把每一個畫面...

2021-09-19 ‧ 由 Anna Cheng 分享
DAY 5

CSS就可以!animation 與他的好夥伴 @keyframes

如果說HTML是網頁開發的第一堂課,CSS差不多就會再第二堂課出現了,好消息是,只要用第二堂學到的語法,就可以製作 Web Motion 啦! 而且若真的要細談...

2021-09-20 ‧ 由 Anna Cheng 分享
DAY 6

認識 CSS animation 與他的孩子們 (一)

keyframes 定義關鍵影格的各自狀態,不同關鍵影格組成動態變化,但我們在定義keyframes時,使用的是from / to 或0%~100%之間,少了一...

2021-09-21 ‧ 由 Anna Cheng 分享
DAY 7

認識 CSS animation 與他的孩子們 (二)

animation 屬性包含了多個子屬性(sub-properties),name和duration為必要值,另外還有其他項目可以依照需求進行設定: anima...

2021-09-22 ‧ 由 Anna Cheng 分享
DAY 8

讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (一)

除了網頁依照設計安排自己動之外,最有趣的部份其實是與使用者的互動,滑鼠移動、點擊、鍵盤按鍵、捲動、甚至是表單送出等,都是可以監控的事件。操控事件最簡單的方式就是...

2021-09-23 ‧ 由 Anna Cheng 分享
DAY 9

讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (二)

在:hover、:active的CSS設定中,當然也可以加上animation,當事件觸發時開始播放定義好的@keyframes。 除了animation,還有...

2021-09-24 ‧ 由 Anna Cheng 分享
DAY 10

讓按鈕來個酷動態!操縱DOM事件:JavaScript篇 (一)

一般來說前端技能來到第三課,就是要面對無所不在、生態系豐富、也象徵著永遠學不完的JavaScript了!比起HTML和CSS,利用JavaScript進行邏輯判...

2021-09-25 ‧ 由 Anna Cheng 分享