【CSS Modules】scroll-timeline-nameプロパティの使い方
scroll-timeline-nameプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
scroll-timeline-nameプロパティは、CSS Scroll-driven Animationsモジュールにおいて、特定のスクロールタイムラインを識別するための名前を保持するプロパティです。このプロパティは、要素のスクロール位置に応じてアニメーションを制御する「スクロール駆動アニメーション」を作成する際に使用されます。
具体的には、scroll-timelineプロパティで定義するスクロールタイムラインに一意の名前を付与し、そのタイムラインを参照可能にする役割があります。例えば、scroll-timeline: --my-timeline block; のように記述することで、--my-timelineという名前のスクロールタイムラインが作成されますが、この--my-timelineがscroll-timeline-nameプロパティによって設定される名前です。
設定された名前は、animation-timelineプロパティでアニメーションと紐付けられ、特定のアニメーションがどのスクロールの進行状況に連動するかを明示的に指定するために活用されます。これにより、複数のスクロールタイムラインを区別し、それぞれのアニメーションを独立して制御することが可能になります。
値には、--（ハイフン2つ）で始まる任意の識別子（<dashed-ident>）を指定します。このプロパティを適切に使用することで、より柔軟で複雑なスクロールエフェクトの実装に貢献します。
構文(syntax)
1scroll-timeline-name: my-scroll-timeline;
引数(parameters)
引数なし
引数はありません
戻り値(return)
none | <dashed-ident>#
scroll-timeline-name プロパティは、スクロール要素に名前を付けるために使用されます。指定できる値は none を指定するか、<dashed-ident> という形式の英数字の識別子です。