技術 Wireframe 製作

一個全面的設計流程：從初步設計到最終階段 草稿和低保真（Low-Fidelity）線框圖：初步構思並繪製基本界面。 回顧和反饋：收集意見並進行調整。 高...

技術 第 26 幅 － p5.js React 起手式，跟著滑鼠搖咧搖咧的海波浪動畫

玩 Library 當然不能錯過 p5 哇～ 先附上超豐富的 p5 example，在這裡可以挖到很多寶，要不是時間有限，很想試試看動畫＋音效 p5 sound...

技術 第 25 幅 － 用 Matter.js 讓物件彼此有一點點互動 ～

昨天我們以 Matter.js 讓三個物件（球體）能透過不透的效果落地反彈，今天的目標則是加入滑鼠事件，並讓物件彼此之間有互動效果，這樣的特效時常應用在一些官方...

技術 第 24 幅 － 以 Matter.js 實作地心引力效果，讓你的動畫完美落地

嗨嗨！插播了復刻小遊戲後，讓我們繼續回到 Canvas Library 的世界吧，今天要分享的是 Matter.js，也就是之前分享過可以用來操作並模擬物理反應...

技術 第 18 幅 － 實作 Particle.js 動畫，讓你的網頁「哇～好像很厲害」

前兩天分享了許多 Libraries，竟然分享了就要實作看看，星期一就選一個輕鬆好玩的 Particle.js 來玩玩吧！今天起範例會離開 Codepen 進入...

技術 第 15 幅 － 事件監聽複習：霹靂卡霹靂拉拉，魔幻舞台 ๛ก(ｰ̀ωｰ́ก)

第十五天了，終於過了一半… 每天寫文章真的不是普通的累，但今天是快樂～星期五必須嗨起來！！就讓我們繼續延續事件監聽這個主題，讓監聽產生出動畫效果。今天的範例程式...

技術 第 12 幅 － 動畫練習：實作 Apple Watch Series 8 時鐘動畫

最近蘋果出了 Apple Watch Series 8，看了我牙癢癢，於是咬緊牙關，把他的錶面臨摹出來了（？）用 Canvas 畫時鐘的教學有很多，今天也參考了...

技術 第 11 幅 － 動畫解析：用 Canvas 讓飛天小女警起飛

我們認識了動畫以及繪製 canvas 動畫的 function，那我們究竟該如何讓動畫動起來呢？如果以過去的前端開發經驗中的 css animaion 來說，我...

技術 第 10 幅 － 動畫入門：嗨動畫，我們先認識一下吧！

其實，我們都曾是動畫師 動畫其實就是一張張的影像，在非常短暫的時間內變化（例如每秒變換 16 張影像），近而產生視覺停留的效果。相信大家小時候都有畫過「翻頁動畫...

技術 33歲轉職者的前端筆記-DAY 15 jQuery 基礎語法

什麼是jQuery 由js發開出來的函式庫 可以解決瀏覽器相容的問題 雖然由js開發出來，但不完全等於js，只是用jQuery的語法寫出來而已 引入方式：下載...

技術 金魚都能懂網頁設計入門 : Animation(鐵人賽第十九天)

教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 animation 的用途 animation 值有哪些 動畫跟關鍵影...

技術 Day17 CSS 動畫 Animation 實作練習(下)

利用 Animation 製作美美的動畫吧 上上篇我們介紹了 Animation 的相關設定，在上一篇也實作了字體模糊動畫效果，本篇來試試看經典的球球追隨運動吧...

技術 Day16 CSS 動畫 Animation 實作練習(上）

利用 Animation 製作美美的動畫吧 上一篇我們介紹了 Animation 的相關設定，Animation 有多個屬性供設定，比起 Transitions...

技術 Day15 CSS 動畫 Animation - 基礎篇

利用 keyframes (影格)來設定更細節的動畫吧！ 之前講解過 Transitions 的動畫效果，也實作一些範例。這一篇文章我們來講講另一個動畫實現方式...

技術 Day14 CSS3 動畫 Transitions實作練習(下）

續上上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！ 在上篇實作中完成了上方兩個動畫效果，本篇我們繼續實作下方兩個動畫效果吧！ 左下動畫...

技術 Day13 CSS3 動畫 Transitions實作練習(上）

續上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！ 接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中，...