電影級捲動與3D效果 是做什麼的？
這是一個為現有網站添加一項電影級技術的簡短流程。它是 futuristic-web-design 技能中電影步驟的獨立封裝版本。
如果 ../futuristic-web-design/ 目錄與此技能相鄰，請在撰寫滾動或 3D 程式碼前先閱讀該目錄中的 references/cinematic-moves.md。該文件包含下方每個食譜的程式碼、重新編碼指令，以及完整的即時 3D 滾動故事流程。
預算
共有五種技術：背景影片英雄區、滾動綁定動畫、固定區塊、視差深度，以及即時 3D 物件。請使用一個背景影片英雄區，並從其餘四種中最多選用兩種。一個頁面若同時使用了所有技術，會顯得像是成品展示帶，讓訪客感到疲倦，並削弱每種效果。
在撰寫程式碼之前，請先走查頁面，針對每個可能放置效果的位置評估：在這裡加入動畫是否能讓資訊更清晰，或讓訪客感受到某種特定情緒？明確說明你將添加什麼、添加到哪裡、它帶來什麼貢獻以及付出什麼代價。如果使用者要求在已加入兩種效果後再增加更多，請坦率地說明取捨：增加頁面負擔，並降低現有效果的衝擊力。
每種技術的保障措施
裝飾物絕不允許導致頁面故障。
- 減少動畫模式。 在
prefers-reduced-motion: reduce設定下，不啟用固定、滾動控制或 3D 下載。顯示正常的堆疊佈局或靜態圖片。這也涵蓋了平滑滾動和轉場效果，腳本驅動的動畫需要有自己的matchMedia檢查，因為它不會遵循 CSS 設定。 - 觸控。 以手指滾動驗證：無跳躍、無水平溢出、無滾動陷阱。
- 小螢幕。 在 768px 以下，以靜態圖片替代 3D。
- 延遲加載。 效果程式碼應在其對應區塊接近視埠時才載入，絕不在初始載入期間載入。
- 故障處理。 若效果發生錯誤或 WebGL 不可用，則保留靜態圖片，其餘頁面正常運作。
- 真實的數據。 動畫計數器絕不能停留在虛假數值上。僅能動畫化呈現方式，而非數據本身。
- 版本。 檢查 GSAP、Three.js、React Three Fiber 和 Lenis 的當前文件及其相容版本。安裝每個套件前需先詢問。
食譜
背景影片英雄區
- 一個帶有
autoplay、muted、loop、playsinline屬性和poster圖片的video元素。手機僅會自動播放靜音且內嵌的影片。 - 先載入
hero-poster.webp海報，這樣在hero.mp4下載期間不會出現空白畫面。 - 為了可讀性，僅在文字區塊下方放置漸變遮罩。調暗整個片段會失去使用影片的意義。標題應在幾秒內即可閱讀。
- 讓文字內容避開片段的焦點主體。桌面版和手機版應分別決定。
- 在減少動畫模式下，顯示海報並跳過自動播放。
固定捲動故事
- 區塊在其頂部到達視埠頂部時固定，隨著滾動逐步經過約三個節奏點，然後釋放。向上滾動時則反向播放。
- 每個節奏點包括一個特大數字、一個簡短標題和一句真實文案。
- 使用 GSAP ScrollTrigger（
pin和scrub）在gsap.matchMedia()內建構，使其僅在允許動畫時存在，並能在結束後自行清理。 - 將標記編寫為普通的堆疊節奏點。在沒有腳本運行的情況下，該標記本身就是降級方案。
- 固定是最容易在手機上出現問題的技術。請要求使用者在真實裝置上以拇指進行測試，若未進行測試則應明確說明。
一個程序化3D裝飾
- 一個小型物件，僅放置一次，位於區塊內容旁邊。根據對形狀的口語描述，使用基本幾何體在程式碼中建構幾何形狀。除非使用者要求，否則不使用下載的模型檔案。
- 緩慢的閒置旋轉加上由滾動驅動的輕微傾斜。材質和光照來自設計系統，如同專業產品攝影棚的燈光效果。
- 容器先以物件的靜態圖片開始。畫布僅在 3D 程式碼載入並掛載完成後才替換該圖片。
- 僅在 768px 及以上寬度、允許動畫且區塊接近視埠時載入。離開螢幕時暫停渲染，並將設備像素比率上限設為 2。
由滾動驅動的影片
- 一個短片段，其播放頭會跟隨滾動位置在兩個方向上移動。它能以遠少於即時 3D 的位元組數達到「產品分解」的效果。
- 首先重新編碼，使每個畫格都成為關鍵畫格，移除音訊並將片段修剪至需要移動的秒數。目標大小約為 1 MB 或更小。
- 固定該區塊，並將滾動進度對應到
video.currentTime。將元素標記為muted和playsinline，且絕不呼叫其play()方法。 - 根據相同的進度值依序顯示文字提示。及時釋放固定。
- 在減少動畫模式下，顯示最具資訊性的靜止畫面。
衡量成本
在添加一項技術後，比較前後的傳輸大小，並以簡短表格報告受影響的檔案和新增的套件。若某項技術過重，請對其進行精簡。若仍持續過重，則將其移除。