滾動電影風格個人網站
建立個人或作品集網站,讓滾動控制播放頭。不是影片檔案。節奏愉悅、完全響應式設計、漸進增強。
權限
- 優先使用 CSS sticky 場景和滾動驅動動畫。僅在 CSS 無法實現固定或捲動時才使用時間軸函式庫。
- 遵循儲存庫的藝術方向或品味技能。不要使用與該品味衝突的通用前端套件。
- 如果已安裝官方的 scroll-timeline 技能,則使用它們。
- 僅列舉想法(是/可能):模糊淡入、眩光懸停、滾動進度、延遲指標、噪點、光線。使用 CSS 或時間軸函式庫重新實作。不要貼上其他框架的動畫基本元素。
- 尊重
prefers-reduced-motion: reduce— 靜止畫面、內容順序不變、無依賴動畫的行動呼籲。
攝影機階梯(停在第一個可行的階梯)
- 刪除冗餘場景。
- CSS:sticky 場景、
animation-timeline: view() / scroll()、僅使用 transform 和 opacity。 - 僅在 CSS 無法固定或捲動一個場景時,才使用滾動觸發函式庫。柔和捲動、線性緩動、卸載時終止。僅對 transform 和 opacity 進行動畫。
- 不要加入第三方平滑滾動劫持、畫布幀序列、3D 英雄區域或
<video>currentTime 捲動。
場景語法
- 最多 4-6 個場景。相鄰的剪輯不得使用相同的佈局系列。
- 開場、保持(固定並捲動)、剪輯、閉幕。
- 固定模式:一個高大的捲動器加上一個固定的全視窗靜止畫面。
- 無整頁強制滾動捕捉。
- 內容必須在禁用 JavaScript 時可閱讀。無滾動劫持。無每個 tick 的框架狀態更新(滑鼠移動或滾動時)。
個人網站內容(根據需求調整)
典型的章節:身份、我建立的東西、目前的產品、連結(他們提供的真實個人檔案)、一個明確的行動呼籲。 連結只能是真實 URL — 永遠不要編造個人檔案。如果缺少,請詢問真實的。
游標
允許作為漸進增強加入自訂游標,具有彈簧延遲或眩光效果。為減少動畫模式和觸控保留原生游標。建議使用 pointer 監聽器加上 requestAnimationFrame 節流,而非在每次移動時更新框架狀態。
技術棧預設
- 使用現代網頁框架即可。
- 部署至所有者的託管帳戶,而非不同團隊的帳戶。
- 編碼遵循本地編碼預設:實作,然後二次審查,並設置檢查常規。
完成定義
- 所有者的帳戶下有一個可用的 URL
- 滾動感覺像電影(愉悅,而非生硬)
- 響應式;減少動畫模式下為靜止畫面
- 僅包含真實連結
- 上線時回報該 URL