Bramus 氏は、HTML と CSS のみを活用したスクロールリンク アニメーションの楽しみについて語っています。WAAPI と統合する JavaScript オプションも含まれています。
章:
- 00:00 - プロローグ
- 00:15 - 導入部とティーザーのサンプル
- 03:41 - スクロールリンク アニメーションとスクロール トリガー アニメーション
- 05:18 - CSS を使用した基本的な例（ドキュメント タイムライン、スクロール進行状況タイムライン、スクロール（）、アニメーション タイムライン）
- 12:31 - JavaScript（ScrollTimeline）を使用した基本的な例
- 14:06 - 名前付きスクロール進行状況タイムライン（scroll-timeline-name、scroll-timeline-axis）
- 20:31 - スクロール進行状況タイムラインのオフセット
- 25:05 - JavaScript を使用して開始/終了するときの要素のトラッキング（ViewTimeline）
- 31:09 - CSS を使用した開始/終了時の要素のトラッキング（view-timeline-name、view-timeline-axis）
- 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
- Enter デモでの画像の表示（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
- パララックス カバーからスティッキー ヘッダー、偽装（JS + WAAPI）→ https://goo.gle/3SKoMCR
スタック カードのデモ（JS + WAAPI）→ https://goo.gle/3VW0wjD
すべての CSS デモを含むコレクション → https://goo.gle/3F9ScqF
JS + WAAPI のすべてのデモを含むコレクション → https://goo.gle/3F9ScXH
Scroll-Linked Animations の仕様 → https://goo.gle/3F9SduJ
Scroll-Linked Animations のポリフィル → 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
HTTP203 ポッドキャストもおすすめです → https://goo.gle/HTTP203Podcast