🚀

CSS だけでスクロールした時のアニメーションを表現する(Scroll-Linked Animation)

2022/11/10に公開約1,400字

Scroll-Linked Animation とは?

W3C で策定中のスクロールに応じたアニメーションを動かすための仕様です。
いままでのアニメーションの基軸は経過時間でしたが、アニメーションをスクロールに応じて動かそうというものです。

注意

2022年11月10日時点で試験的なため、Google Chrome と Mozilla Firefox で使うには設定の変更が必要です。

Mozilla Firefox : https://bugzilla.mozilla.org/show_bug.cgi?id=1676779
Google Chrome : https://bugs.chromium.org/p/chromium/issues/detail?id=1023424

デモ

ブラウザの設定を変えないと動かないので、動画で動きを紹介:
スクロールに応じて、透明度を変えています。

設定を変えたブラウザで試したい方は以下の codepen で動きを確認してみてください。
https://codepen.io/mantaroh/pen/RwJPRJB

どうやって書くの?

CSS で指定をします。

スクロールタイムラインの決定

まずスクロール領域を持つ要素に scroll-timeline を指定します。ショートハンドで書いていますが、1つ目はスクロールタイムライン名と呼ばれるアニメーションに指定するタイムラインです。2つ目はスクロール軸で vertical / horizontal を指定します。

これで、スクロールした時に動かすアニメーションにスクロール量を教える準備が出来ました。

#container {
  overflow: scroll;
  scroll-timeline: squareTimeline vertical;
}

次にアニメーションしたい要素の animation-timeline に先ほどのスクロールタイムラインを指定します。

.animDiv:nth-child(n) {
  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: squareTimeline;
}

設定の変え方

Mozilla Firefox

URL に about:config と入力して layout.css.scroll-linked-animations.enabled の設定を true にします。

Google Chrome

URL に chrome://flags と入力して Experimental Web Platform features の設定を Enabled にします。

Discussion

ログインするとコメントできます