本日の GUI チャレンジでは、@AdamArgyleInk が、スクロールをインタラクティブにすることで、昔ながらの SF 映画の 3D テキスト エフェクトに #CSS のアレンジを加えました。最新の Scroll Animations 1 仕様で指定されている CSS のスクロール リンク アニメーションを使用して、テキストをスクロールして銀河の端(ビューポート)に消える様子をご覧ください。
章:
- 0:00 - はじめに
- 0:29 - 導入
- 1:00 - お話の時間
- 2:20 - スクロールドリブン アニメーション
- 3:21 - HTML
- 4:00 - CSS
- 8:58 - デバッグ
- 10:52 - 結び
リソース:
- デモを試す → https://goo.gle/410acMc
- 入手する → https://goo.gle/408Nkc1
- 仕様を確認 → https://goo.gle/3pvWX49
その他の GUI チャレンジはこちら → https://goo.gle/GUIchallenges
Google Chrome Developers に登録 → https://goo.gle/ChromeDevs