此專題展示如何透過滾動來控制影片播放進度
滾動探索內容 ↓
1. Fixed Video Background：影片使用 position: fixed 和
z-index: 1，固定在背景層
2. Flying Card Layout：使用 Bootstrap Grid 的 col-md-6
創造 3:6:3 佈局，卡片浮在影片上方
3. Transparent Sections：每個 section 是 100vh
全透明，只有卡片區域有半透明背景
4. Z-index Layering：使用 z-index: 10 確保內容在影片上方
1. 計算播放區間：
videoStartPosition = videoSection 頂部位置
videoEndPosition = endingSection 頂部位置
2. 監聽滾動事件：
使用 jQuery 的 $(window).scroll() 監聽頁面滾動
3. 影片顯示控制：
• 在 leading section：影片隱藏 removeClass('active')
• 在 video section：影片顯示並根據滾動比例播放
• 在 ending section：影片隱藏
4. 計算播放進度：
scrollProgress = (當前位置 - 起始位置) / 播放區間長度
videoElement.currentTime = duration × scrollProgress
使用 Bootstrap Grid System：
container - 提供響應式寬度容器
row - 創建水平行佈局
col-md-6 - 在中等螢幕及以上佔據 6/12 (50%) 寬度
justify-content-center - 將列置中對齊
Flying Card 效果：
• Section 是 100vh 全透明背景
• 只有 col-md-6 內的卡片有半透明黑色背景
• 卡片高度自適應內容，浮在影片上方
• 創造輕盈的漂浮視覺效果
從零開始的完整開發流程：
Bootstrap 5 和 jQuery 的 HTML5 網頁。
頁面包含開頭的 leading section（100vh，高度滿版，背景為深色）
以及結尾的 ending section（100vh，背景為深色）。
<video> 元素作為背景，設定 position: sticky 與
top: 0，
讓影片在滾動時固定在畫面上。
使用 object-fit: cover 讓影片自動填滿整個視窗。
加上 preload="auto" 以預先載入影片、確保播放順暢。
video-section，背景為黑色。
內含三個 card-section，每個區塊高度為 100vh。
使用
Flexbox（display: flex、align-items: center、justify-content: center）讓內容垂直置中。
採用 Bootstrap Grid（col-md-6）形成 3:6:3 的版面，讓內容卡片置於中央。
每張卡片使用不同透明度的黑色背景（rgba(0,0,0,0.8 / 0.6 / 0.4）、加上圓角與陰影效果。
設定 z-index: 10 讓卡片顯示在影片之上。
video-section 的相對位置。
當區塊頂端距離視窗底部小於等於 50vh 時開始播放影片。
播放範圍為進入 50vh 至 video-section 底部之間。
根據滾動進度計算 scrollProgress，設定
videoElement.currentTime = duration × scrollProgress。
在進入 leading section 前維持影片第一幀，結束後維持最後一幀。
spacer div，讓影片有足夠播放空間。
每張卡片中可加入技術說明文字，介紹 核心設計概念、JavaScript 邏輯 與 Bootstrap 網格系統。
關鍵：逐步迭代，從基本結構開始，再加入互動效果，最後優化細節