Bramus 採用由 HTML 和 CSS 技術為基礎的捲動式動畫，令人感到興奮。其中也包含與 WAAPI 整合的 JavaScript 選項！
章節：
- 00:00 - 古洛道
- 00:15 - 簡介 + 前導廣告範例
- 03:41 - 捲動連結與捲動觸發的動畫
- 05:18 - 使用 CSS 的基本範例 (文件時間軸、捲動進度時間軸、Scroll()、動畫時間軸)
- 12:31 - 使用 JavaScript 的基本範例 (ScrollTimeline)
- 14:06 - 命名捲動進度時間軸 (捲動時間軸名稱、捲動時間軸軸)
- 20:31 - 捲動進度時間軸偏移
- 25:05 - 使用 JavaScript 進入/離開時追蹤元素 (ViewTimeline)
- 31:09 - 使用 CSS 進入/離開時追蹤元素 (檢視畫面時間軸名稱、檢視時間軸軸)
- 32:02 - 查看進度時間軸插邊
- 33:07 - 查看進度時間軸範例 (封面流程、聯絡人清單飛出/飛出、堆疊資訊卡)
- 35:40 - 立即體驗！
- 38:04 - 末日
資源：
- 封面流程示範 (CSS) → https://goo.gle/3SvEQbd
- 封面流程示範 (JS+WAAPI) → https://goo.gle/3F9S62h
- 捲動進度示範 (CSS) → https://goo.gle/3F9S6zj
- 捲動進度示範 (JS+WAAPI) → https://goo.gle/3Sq5nXn
- 進入示範模式的圖片顯示圖片 (CSS) → https://goo.gle/3F9S8XX
- 輸入示範上的 Image Reveal (JS+WAAPI) → https://goo.gle/3Sto8JK
- 清單飛車 + 飛出效果示範 (CSS) →https://goo.gle/3Svg3UE
- 列出飛航 + 飛出效果示範 (JS+WAAPI) → https://goo.gle/3F9Saix
- 水平捲動區段示範 (CSS) → https://goo.gle/3SpaDe5
- 水平捲動區段示範 (JS+WAAPI) → https://goo.gle/3SAbcBz
- 將 Parallax 遮蔽到固定式標頭，經過偽造 (JS+WAAPI) → https://goo.gle/3SKoMCR
堆疊資訊卡示範 (JS+WAAPI) → https://goo.gle/3VW0wjD
包含所有 CSS 示範的集合 → https://goo.gle/3F9ScqF
含所有 JS+WAAPI 示範的集合 → https://goo.gle/3F9ScXH
捲動連結動畫規格 → https://goo.gle/3F9SduJ
捲動連結動畫 Polyfill → https://goo.gle/3SyziN8
CSS WG 問題「恢復捲動畫面偏移」→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
HTTP 203 系列的更多影片 → http://goo.gle/HTTP203
按這裡訂閱 Google Chrome 開發人員 → https://goo.gle/ChromeDevs
此外，如果你喜歡這個 Podcast，可能會喜歡 HTTP203 Podcast → https://goo.gle/HTTP203Podcast