【CSS Modules】scroll-timeline-axisプロパティの使い方
scroll-timeline-axisプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
scroll-timeline-axisプロパティは、CSSで定義するスクロール駆動アニメーションにおいて、アニメーションの進行度を決定するために参照するスクロール軸の方向を保持するプロパティです。このプロパティは、主にscroll-timelineプロパティと組み合わせて使用され、Webページのスクロールの進行をアニメーションのタイムラインとして利用する際に、どの方向のスクロールに反応させるかを指定するために重要な役割を果たします。
具体的な値としては、以下の種類があります。
block: スクロールコンテナのブロック軸方向（通常は垂直方向ですが、writing-modeプロパティの設定によっては水平方向になることもあります）のスクロールの進行をアニメーションに適用します。これはこのプロパティのデフォルト値です。
inline: スクロールコンテナのインライン軸方向（通常は水平方向ですが、writing-modeプロパティの設定に依存します）のスクロールの進行をアニメーションに適用します。
x: 常に水平方向（X軸）のスクロールの進行をアニメーションに適用します。writing-modeプロパティの影響を受けません。
y: 常に垂直方向（Y軸）のスクロールの進行をアニメーションに適用します。writing-modeプロパティの影響を受けません。
例えば、ユーザーがページを縦にスクロールするのに合わせて要素がフェードインしたり、パララックス効果を適用したりするアニメーションを設定する場合に、yまたはblockの値を指定することで、垂直方向のスクロールとアニメーションの進行を同期させることが可能になります。このプロパティを適切に活用することで、スクロールに連動した魅力的なユーザーインターフェースを実装し、動的でインタラクティブなWeb体験を提供できるようになります。CSSのスクロールタイムライン機能における、アニメーションの挙動を詳細に制御するための重要な要素の一つと言えます。
構文(syntax)
1scroll-timeline-axis: y;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません