鐵人檔案
將 UIUX 與前端工程師的雙重角度來撰寫這次主題。
把 Figma 上的設計稿 ，從 design system 到 UI 元件利用 Chakra UI 完成實作，嘗試在30天摸索出視覺系統開發流程，以及分析如何搭配 framer motion 等技術以 React 實作流行的網頁動態特效。
前言進到鐵人賽的第 21 天，繼續想下一篇的主題越來越不容易，可能之後的主題會較為零散，會想把我覺得好用的功能帶到。回想當初會想以 Chakra UI 為主題得...
Chakra UI 有提供不少 React hooks 讓我們實作元件更方便 useMediaQuery 這個 hook 幫助我們去偵測 media query...
在前端開發也不乏前端動畫的任務，因為在使用 Chakra UI 使用 style props 做開發。如果還是像過去一樣實做動畫是靠 css animation...
今日計畫: 結合 Chakra UI 和 framer-motion 來打造 Reveal 效果。解釋一下 Reavel 效果是指當元件進入到畫面 viewpo...
上一篇 製作 Reveal component 主要是利用了 framer-motion API 中的 motoin 與 scroll。接著本篇透過 vari...
一般來說 CSS 無法 對漸層產生動畫效果，而在 framer-motion 更新後官方文件有特別介紹漸層的動畫效果是可以實現的。我們可以用此特性來製作**百頁...
網站還在加載，若只有空白狀態會讓使用者等待得更不安，為舒緩這個載入的焦慮 spinners/loaders 是不錯的解決方案。不過因為即時有了 spinners...
framer-motion v7 版本做了不少幅度的更新，包含移除了 useViewportScroll 新增了 useScroll。改用 useScroll...
上一篇提到 useScroll 預設為 Page scroll今天來看看 Element scroll、Element position Element scr...
來到 framer-motion useScroll 小單元的最後一篇，也是鐵人挑戰的最後一天，最後用華麗的 parallax 來做收尾。會使用到 useSc...
