【CSS Modules】scroll()関数の使い方
scroll()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
scroll()関数は、CSSにおいて、Webページ上のスクロール位置に基づいてアニメーションの進行を制御するために使用される関数です。この関数は主に、CSSの新しい機能であるスクロール連動型アニメーションにおいて、animation-timelineプロパティの値として指定されます。これにより、特定の要素やビューポートのスクロール量とアニメーションの再生時間を同期させることが可能になります。
具体的には、scroll()関数は、監視するスクロールコンテナとスクロール方向を指定する引数を取ります。最初の引数には、ドキュメントのルートスクローラー（通常はブラウザのビューポート）を対象とするroot、または最も近いスクロール可能な祖先要素を対象とするnearestのいずれかを指定します。次に、スクロール方向として垂直スクロールの場合はblock、水平スクロールの場合はinlineを指定します。例えば、scroll(root block)`と記述することで、ドキュメント全体の垂直スクロールに連動するアニメーションを設定できます。
この機能を使うことで、要素がビューポートに入り始めたときからスクロールアウトするまでの期間をアニメーションの0%から100%に対応させるなど、スクロール量に応じて柔軟にアニメーションを制御できます。これにより、開発者はJavaScriptを用いることなく、パララックス効果やスクロール進捗バー、要素の表示に応じて変化するエフェクトといった、複雑なユーザーインターフェースアニメーションをCSSだけで効率的に実装できるようになります。Webサイトのパフォーマンス向上にも寄与し、ユーザーにリッチでインタラクティブな体験を提供するための強力なツールです。
構文(syntax)
1scroll(root inline 50%)
引数(parameters)
[ <axis> || <scroller> ]?
- axis: スクロールする軸（
xまたはy） - scroller: スクロールする要素を指定するセレクター
戻り値(return)
戻り値なし
戻り値はありません