はじめに
みなさんは「スクロール駆動アニメーション」を知っていますか？
スクロール駆動アニメーションは、Chrome115でリリースされた、CSSだけでスクロールに合わせたアニメーションが作れるようになるプロパティです。
今までは、JavaScriptなどを駆使して、スクロールアニメーションを作っていましたが、
スクロール駆動アニメーションを使うことで、簡単にスクロールアニメーションを作れるようになります。
この記事では、そんなスクロール駆動アニメーションの基本的な使い方・プロパティについて解説します。
スクロール駆動アニメーション
スクロール駆動アニメーションは、SSだけでスクロールに合わせたアニメーションが作れるようになるプロパティです。
スクロール駆動アニメーションには、2種類のアニメーションタイムラインが定義されています。
01. Scroll Progress Timeline
Scroll Progress Timelineは、スクロールできるコンテナー内のスクロール位置によって、アニメーションを指定できるタイムラインです。
上記の画像のように、開始スクロール位置を0%、終了スクロール位置を100%として、アニメーションが動きます。
サンプル
このサンプルでは、スクロール位置に合わせて、X軸方向のscaleを、0.5 から 1 へアニメーションします。
See the Pen Scroll Driven Animations - sample 01 by でぐぅー | Qiita (@sp_degu) on CodePen.
基本的な使い方
Scroll Progress Timelineの基本的な使い方は、アニメーションさせたい要素の animation-timeline に scroll() 関数を使い、animation に @keyframes を指定するだけです。
scroll()
scroll(<scroller> <axis>)
ref: scroll() - MDN
scroll() は引数に <scroller> と <axis> を受け取ることができ、上記のように指定することができます。
-
scroller：スクロールする基準を決める値 （省略可）
-
nearest：最も近いスクロールする先祖要素を基準にする （デフォルト） -
root：ドキュメントビューポートを基準にする -
self：指定した要素自体を基準にする
-
-
axis：スクロール方向を決める値 （省略可）
-
block：ブロック方向のスクロールを基準にする （デフォルト） -
inline：インライン方向のスクロールを基準にする -
y：y軸方向のスクロールを基準にする -
x：x軸方向のスクロールを基準にする
-
具体的に scroll() を使うと以下のようなCSSになります。
@keyframes scroll-anim {
from { scale: 0.5 1; }
to { scale: 1 1; }
}
.inner {
animation: scroll-anim linear;
animation-timeline: scroll();
}
※ @keyframesでは、from / to だけでなく、パーセント%での指定もできます。
※ イージングは、linear 以外も使うことが可能です。
02. View Progress Timeline
View Progress Timelineは、スクロールできるコンテナーのスクロールポートを基準としてアニメーションを指定できるタイムラインです。
基準となるアニメーション範囲は、以下の種類があります。
① cover
cover は、スクロールポートの全範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上入ってから、要素が完全に出るまでアニメーションします。
② entry
entry は、スクロールポートに要素が見える範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上入ってから、全要素が見えるようになるまでアニメーションします。
③ exit
exit は、スクロールポートに要素が見えなくなる範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上出てから、全要素が見えなくなるまでアニメーションします。
④ entry-crossing
entry-crossing は、スクロールポートの終了境界エッジを横切っている範囲がアニメーション範囲になります。
そのため、スクロールコンテナーの終了境界エッジを要素が重なり始めてから、終わるまでアニメーションします。
⑤ exit-crossing
exit-crossing は、スクロールポートの開始境界エッジを横切っている範囲がアニメーション範囲になります。
そのため、スクロールコンテナーの開始境界エッジを要素が重なり始めてから、終わるまでアニメーションします。
⑥ contain
contain は、要素がスクロールポートに入っている範囲がアニメーション範囲になります。
そのため、全要素がスクロールポート内に入ってから、要素がで始めるまでアニメーションします。
サンプル
このサンプルでは、基準となるスクロール範囲に合わせて、widthをアニメーションします。
-
cover→widthを、50%から100%へアニメーションします。 -
entry→widthを、50%から100%へアニメーションします。 -
exit→widthを、100%から50%へアニメーションします。 -
entry-crossing→ widthを、50%から100%へアニメーションします。 -
exit-crossing→ widthを、100%から50%へアニメーションします。 -
contain→ widthを、100%から50%へアニメーションします。
See the Pen Scroll Progress Timeline by でぐぅー | Qiita (@sp_degu) on CodePen.
基本的な使い方
View Progress Timelineの基本的な使い方は、アニメーションさせたい要素の animation-timeline に view() 関数を使い、animation-range でアニメーションの範囲を決め、animation に @keyframes を指定するだけです。
view()
view(<axis> <view-timeline-inset>)
ref: view() - MDN
view() は引数に <axis> と <view-timeline-inset> を受け取ることができ、上記のように指定することができます。
-
axis：スクロール方向を決める値 （省略可）
-
block：ブロック方向のスクロールを基準にする （デフォルト） -
inline：インライン方向のスクロールを基準にする -
y：y軸方向のスクロールを基準にする -
x：x軸方向のスクロールを基準にする
-
-
view-timeline-inset：要素のアニメーションを調整するオフセット値 （省略可）
-
<length-percentage>：インセット値を1~2つ指定できる （デフォルト: auto）- auto, 50px, 25%, 3rem, etc.
-
animation-range
animation-range: entry 0% entry 100%;
animation-range プロパティは、上記のようにスクロールアニメーションがスタートする位置・終了する位置とアニメーション範囲を指定することができます。
細かい指定は、↓こちらのscroll-driven-animationsジェネレーターを触りながら、調整するのがわかりやすいと思います。
具体的に view() と animation-rangeを以下のようなCSSになります。
@keyframes scroll-anim {
from { width: 50%; }
to { width: 100%; }
}
.inner {
animation: scroll-anim linear;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
※ @keyframesでは、from / to だけでなく、パーセント%での指定もできます。
※ イージングは、linear 以外も使うことが可能です。
まとめ
この記事では、Chrome115でリリースされた、CSSだけでスクロールに合わせたアニメーションが作れるようになるスクロール駆動アニメーションについて解説しました。
スクロール駆動アニメーションは、CSSだけでスクロールに合わせたアニメーションを制御できる素晴らしく、待ちに待ったプロパティです。
具体的なサンプルコードも載せているので、ぜひ試してみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。