🚀
CSS だけでスクロールした時のアニメーションを表現する(Scroll Driven Animation)
Scroll Driven Animation(旧Scroll-Linked Animation) とは？
W3C で策定中のスクロールに応じたアニメーションを動かすための仕様です。
いままでのアニメーションの基軸は経過時間でしたが、アニメーションをスクロールに応じて動かそうというものです。
注意
デモ
ブラウザの設定を変えないと動かないので、動画で動きを紹介：
スクロールに応じて、透明度を変えています。
設定を変えたブラウザで試したい方は以下の codepen で動きを確認してみてください。
どうやって書くの？
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