スクロールの状態ごとにスタイルを指定するCSS
- カテゴリー
- CSS >
- CSS単位／関数／色
- CSS >
- CSSテクニック
全2回
スクロールに関する状態をCSSだけで判定できるコンテナクエリーscroll-state() の仕様と、実践的な使い方を説明します。
後編 scroll-state()を活用した実践例
scroll-state()の知識を応用し、実際にスクロールに応じて見出しやカードの見た目が変化するUIを作ってみます。組み合わせることで、動きのある表現をどのように実現できるのかを見ていきましょう。
前編 scroll-state()で判定できる3つの状態
スクロールの状態の変化をCSSだけで判定し、スタイルを定義できるコンテナクエリーについて説明します。