Horizontal Scrolling Theater｜互動效果豐富的橫向捲動電影院
閱讀時間約 3 分鐘
簡介
以前就想過要做一個展示電影的頁面，這次使用 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 部署網站
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。
除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
2023 Vue直播班筆記 - 動態路由Props，接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Vue Router 動態路由，假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用"路徑帶參數"的方式來撈取商品的資訊。
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ，其中包含單筆資料、多筆資料。
vocus 致力於讓創作者透過多元的變現方式展現你的創作動力，除了原有的訂閱、廣告、贊助功能，在去年正式推出了「數位商品」販售功能，讓你的創作能有更多樣化的呈現與變現方式。
為了讓創作者們能更輕鬆地上架數位商品，我們做了以下的功能更新，讓你在上架時更加順暢！
第一次系列的第二彈，我來到電影院了。之前從來沒有在國外走進電影院過，想去瞧瞧跟台灣有甚麼不同，也剛好最近有想看的電影，就決定來趟電影院之旅。
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
串流大戰似乎顛覆了許多觀眾的觀影觀念，許多熱門電影如今上架串流平台的速度更快，不用出門，在串流平台上就有看不完的電影；而也仍然有許多觀眾，享受在電影院觀看大銀幕的戲院體驗。今天要來介紹一個特別的「線上+線下」觀影優惠方案：讓你到戲院不到一百塊就能看電影+ 上萬小時電影看到飽的串流平台方案。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。
除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
2023 Vue直播班筆記 - 動態路由Props，接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Vue Router 動態路由，假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用"路徑帶參數"的方式來撈取商品的資訊。
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ，其中包含單筆資料、多筆資料。
vocus 致力於讓創作者透過多元的變現方式展現你的創作動力，除了原有的訂閱、廣告、贊助功能，在去年正式推出了「數位商品」販售功能，讓你的創作能有更多樣化的呈現與變現方式。
為了讓創作者們能更輕鬆地上架數位商品，我們做了以下的功能更新，讓你在上架時更加順暢！
第一次系列的第二彈，我來到電影院了。之前從來沒有在國外走進電影院過，想去瞧瞧跟台灣有甚麼不同，也剛好最近有想看的電影，就決定來趟電影院之旅。
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
串流大戰似乎顛覆了許多觀眾的觀影觀念，許多熱門電影如今上架串流平台的速度更快，不用出門，在串流平台上就有看不完的電影；而也仍然有許多觀眾，享受在電影院觀看大銀幕的戲院體驗。今天要來介紹一個特別的「線上+線下」觀影優惠方案：讓你到戲院不到一百塊就能看電影+ 上萬小時電影看到飽的串流平台方案。