Horizontal Scrolling Theater
以前就想過要做一個展示電影的頁面,這次使用 Vue 3 搭配 GSAP,並結合自己收藏的 46 部藍光電影所做成的 API 做串接,達成能夠橫向捲動的電影購物頁面。實作上,除了藉由 CSS 屬性 relative 搭配 GSAP 來調整元素的 left 值來實現橫向捲動的功能,另外在點擊「加入購物車」按鈕時,透過抓取當下電影封面位置和設計移動軌跡,做出漂亮的放入購物車動畫,以及使用 Vue 的 watch API 監視購物車資料,從購物車新增或移除電影時,加上購物車圖示縮小 20% 的反饋;這些在開發過程中不斷優化的互動效果,在最後整合到一起時,產生了驚艷的使用體驗。
More by Ray 🌿 View profile
Like