【CSS Modules】scroll-marker-groupプロパティの使い方
scroll-marker-groupプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
scroll-marker-groupプロパティは、CSSのスクロール駆動アニメーションにおいて、スクロールマーカーをグループ化するためのプロパティです。これは、Webページでユーザーのスクロール動作に合わせて要素をアニメーションさせる際、アニメーションの開始や停止のトリガーとなる特定のスクロール位置（スクロールマーカー）を、論理的なまとまりとして扱うことを可能にします。
このプロパティを使用することで、複数のスクロールマーカーやそれに関連するアニメーション設定を一貫して管理できるようになります。例えば、複数のセクションが同じスクロールタイミングでアニメーションを開始するよう設定したい場合、それぞれのマーカーを共通のグループに属させることで、設定を整理し、コードの可読性を高めることができます。これにより、複雑なスクロール体験を効率的に設計する手助けとなります。
scroll-marker-groupプロパティには、どのグループにも属さないことを示すnone、または開発者が自由に名前を付けられる<custom-ident>（任意の識別子）を指定します。この識別子で定義されたグループ名は、scroll-timelineやscroll-markerなどの関連プロパティから参照され、スクロール位置とアニメーションの同期を制御するために利用されます。
公式リファレンス: scroll-marker-group
構文(syntax)
1.element { 2 scroll-marker-group: group-name; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません