search

CAFECA-IO / iSunCoin-official

https://i-sun-coin-official.vercel.app
MIT License
0 stars 0 forks source link

[UI] iSunCoin 機殼規格頁面 prototype #32

Closed StrawHo closed 1 week ago

StrawHo commented 2 weeks ago

製作給前端參考的動畫prototype，如有Figma prototype無法呈現之動畫擷取類似的動畫實例提供給前端參考

StrawHo commented 1 week ago
  1. Navbar完成串接:可透過Navbar連結至其他頁面
  2. Product Top Cover動畫說明：首次進入頁面時會播放移動動畫，動畫結束後會輪播產品資訊，產品資訊輪播完後回到cover不會有動畫。
  3. 價格文字動畫說明:scroll-driven animations，滑動到此處才會播放未顯示的三行文字，播放順序為由上到下。
  4. GIF動畫說明:scroll-driven animations，滑動此處才會播放未顯示的文字，動畫切換後會重新播放。
  5. 切換顏色說明:scroll-driven animations，滑動此處才會播放不同角度的產品圖。
StrawHo commented 1 week ago

價格文字動畫prototype: https://www.figma.com/proto/WMLBd54cxAo92xuA2Jw51v/iSunCoin-Landing-Page?page-id=4%3A1614&node-id=315-16596&viewport=-1618%2C-962%2C0.25&t=eMTM8FUV5Y5CWSFW-1&scaling=min-zoom&content-scaling=fixed

StrawHo commented 1 week ago

GIF動畫prototype: https://www.figma.com/proto/WMLBd54cxAo92xuA2Jw51v/iSunCoin-Landing-Page?page-id=4%3A1614&node-id=315-16597&viewport=-1744%2C-1368%2C0.25&t=tqQAgdstSu2ELfGs-1&scaling=min-zoom&content-scaling=fixed

StrawHo commented 1 week ago

頁面Prototype: https://www.figma.com/design/WMLBd54cxAo92xuA2Jw51v/iSunCoin-Landing-Page?node-id=163-9991&t=vXbOmM1SCINTZqGX-1

花費時間約4hr，Done!