🚀

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

2022/11/10に公開

Scroll Driven Animation(旧Scroll-Linked Animation) とは?

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

注意

デモ

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

設定を変えたブラウザで試したい方は以下の 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-driven-animations.enabled の設定を true にします。

Google Chrome

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

Discussion

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