鐵人檔案
「這個按鈕點下去，換到這個頁面。」淡出淡入？下方上滑？淡出然後右方移入？
讓介面設計加分！頁面加上適當動態效果，加強使用者感受，也能運用時間差與效果呈現，彌補部分效能缺口帶來的不好體驗，運用一致性的視覺與動態效果，打造獨一無二的品牌風格。
-
嘗試創造網頁動態效果，從原生css、JavaScript開始，並使用Three.js、PixiJS等函式庫，從做中學的學習紀錄。
上一篇整理了 JavaScript 操縱網頁元件事件的基本流程： 指定網頁元件，可用 getElementById 或 getElementsByClassN...
要撰寫前端功能，直接使用JavaScript是絕對可行的，但要更有效率、具有良好開發體驗的話，使用Library是現今開發者多數的選擇(當然挑選也是一門學問)，...
//jQuery 使用Id指定 $('#my-div') //jQuery 使用Class指定 $('.my-div') 當指定到對的網頁元件後，原生的add...
除了監聽事件外，jQuery也提供了定義好的動態效果函式，讓開發者直接使用，並透過傳入相關參數，去自訂自已的效果。主要分成Basic、Fading、Slidin...
除了定義好的效果之外，jQuery提供了一個可以完全自訂的函式animate()，看起來有點像是整合CSS@keyframes和animation，第一個值就是...
接下來想介紹動態相關的JavaScript Library中，發展相當久、專門處理動態效果的 GSAP(GreenSock Animation Platform...
gsap.to()、gsap.from()和gsap.fromTo()定義了基本動畫架構，除此之外，gsap也提供了動畫控制的函式，像是開始start()、暫停...
前兩篇介紹了Tween，可以藉此建立出動態效果，但動畫不單單是元件本身的動態，以整個專案的視角來看，一定會有先後順序，有時候有微妙的時間差可以創造韻律感，或是產...
在gsap.timeline()上使用如to()、from()或fromTo()等函式建立動畫，除了能利用數字定義開始的秒數之外，也可以使用標籤的方式指定，先在...
PixiJS為2D WebGL渲染引擎，經常使用於互動與遊戲相關專案中，具有快速、裝置支援度高的優點，雖然不如其他的Library擁有完整的開發環境，但也因為P...
