此專題展示如何透過滾動來控制影片播放進度
滾動探索內容 ↓
1. Fixed Video Background：影片使用 position: fixed 和 z-index: -1，固定在背景層
2. Relative Content Flow：內容區使用 position: relative，按照正常文檔流排列
3. Semi-transparent Overlays：每個 section 使用 rgba(0, 0, 0, 0.x) 創造半透明遮罩層次
4. Flexbox Centering：使用 display: flex、align-items: center、justify-content: center 實現完美置中
1. 計算播放區間：
videoStartPosition = leadingSection 底部位置
videoEndPosition = endingSection 頂部位置
2. 監聽滾動事件：
使用 jQuery 的 $(window).scroll() 監聽頁面滾動
3. 條件判斷：
• 在 leading section：影片停在起始 (currentTime = 0)
• 在中間區域：根據滾動比例播放
• 在 ending section：影片停在結尾 (currentTime = duration)
4. 計算播放進度：
scrollProgress = (當前位置 - 起始位置) / 播放區間長度
videoElement.currentTime = duration × scrollProgress
父容器設定：
display: flex - 啟用 Flexbox 佈局模式
align-items: center - 垂直方向置中對齊
justify-content: center - 水平方向置中對齊
優點：
• 語法簡潔，不需要複雜的 transform 或 absolute positioning
• 自動適應內容高度，響應式友好
• 在任何螢幕尺寸下都能保持完美置中
• 相比傳統方法更易維護和理解
這個專題整合了 HTML5 Video、CSS Flexbox、jQuery 事件處理等技術
實現了一個沈浸式的互動敘事體驗
技術要點：
Fixed positioning + Relative flow + Scroll event handling + Video API