Skip to content

rayc2045/horizontal-scrolling-theater

Repository files navigation

Horizontal Scrolling Theater|互動效果豐富的橫向捲動電影院

Photo Photo

> Horizontal Scrolling Theater

簡介

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

外觀與互動設計

  • 加入水平捲動功能,並在載入網頁時以動畫展示作為操作提示
  • 使用淺灰色作為電影卡片底色,持久凝視不眩光
  • 對電影標題、分類和敘述分別套用不同的文字大小、字重 (font weight) 和顏色,做出視覺層次 (visual hierarchy)
  • 在電影卡片封面外加上微陰影,並在鼠標碰觸卡片時,對卡片本身和卡片封面做出不同的上移距離,達到微 3D 效果
  • 將電影加入到購物車時呈現過場動畫,以及對按鈕套用「已加入購物車」的內容和樣式,讓使用體驗更加直覺順暢
  • 使用 ionicons 的購物車 icon,並且在開、關購物車頁面時,切換線條或填充的版本;以及在購物車加入或移除電影時,觸發購物車 icon 縮小 20% 的互動效果
  • 從購物車加入或移除電影時,對總金額數字做實時加總的跳動效果
  • 開啟購物車時,虛化、暗化背景,添加層次和立體感;而在購物車為空時,另外加上倒數計時器,1.6 秒後自動回到主畫面

開發紀錄

  • 將自己收藏的 46 部藍光電影製作成 JSON API
  • 使用安裝套件更為快速的套件管理系統 pnpm
  • 使用基於 Webpack 的 Vue CLI 做零配置原型建構,透過分拆 Components 進行模組化開發,以及受文章「Do you really need Vuex?」啟發,使用更加優雅的 Composition API 達到類似於 Vuex store 的跨元件狀態共享
  • 引入 normalize.css 達到跨瀏覽器的樣式重置、使用預處理器 Sass 開發外觀,以及透過 Scoped CSS 達到互不干擾的樣式封裝
  • 將鼠標碰觸互動效果以觸控設備為條件做分離,優化不同裝置上的使用體驗
  • 使用 Vue 的 watch API 監視金額加總,和結合 window.requestAnimationFrame() 方法,達成在新增或移除電影時,做出實時金額加總的功能 (跳動數字)
  • 借助 GSAP 之力
    • 加上綁定捲動事件和設定元素 relative 定位,透過改變 left 值實現橫向捲動功能
    • 透過點擊「加入購物車」按鈕後,取得當下電影封面位置和設計移動軌跡,達成漂亮的加入購物車動畫
    • 使用 Vue 的 watch API 監視購物車資料,從購物車新增或移除電影、導致資料更新時,觸發購物車 icon 縮小 20% 的互動效果
  • 在加入電影到購物車、從購物車移除電影時,使用變數作為開關,阻擋 GSAP 動畫期間的複數操作,確保互動效果始終如期運行
  • 使用 Netlify 部署網站