【CSS Modules】view-timeline-axisプロパティの使い方
view-timeline-axisプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
view-timeline-axisプロパティは、CSSのスクロール駆動アニメーションにおいて、アニメーションの進行を制御するスクロール軸の方向を保持するプロパティです。このプロパティは、view-timelineプロパティと組み合わせて使用され、要素がスクロール可能なコンテナ（スクロールポート）内で表示される進行度合いをアニメーションの基準とする際に、どの方向のスクロールイベントを監視するかを指定します。
取りうる値としては、block、inline、x、yがあります。blockは論理的な軸であり、現在のwriting-modeプロパティに従ってブロックのテキストが配置される方向、一般的には垂直方向のスクロールを監視します。inlineも論理的な軸で、現在のwriting-modeプロパティに従ってインラインのテキストが配置される方向、一般的には水平方向のスクロールを監視します。これに対し、xは物理的な水平方向のスクロールを、yは物理的な垂直方向のスクロールを直接監視します。
このプロパティを活用することで、ユーザーのスクロール操作に基づいて要素をフェードインさせたり、拡大させたりするなど、動的でインタラクティブなユーザー体験をCSSのみで実現できます。特に、国際化されたコンテンツではblockやinlineを使用することで、言語の書き込み方向によらず一貫したスクロールアニメーションの挙動を保証することが可能です。これにより、よりリッチなウェブページを効率的に開発するための強力なツールとなります。
構文(syntax)
1.example-element { 2 view-timeline-axis: block; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
block | inline | x | y | none
view-timeline-axis プロパティは、ビューポートに相対的なスクロール軸を定義するために使用され、block、inline、x、y、または none のいずれかの値を取ります。block はブロック軸、inline はインライン軸、x は水平軸、y は垂直軸、none はビュータイムラインを無効にします。