【cssで実装】スクロール量に合わせてアニメーション
cssでスクロール量に合わせてアニメーションすることができるようになったみたいなので
試してみました。
本サイトのトップページで実装してみた、
人間がスクロールに合わせて道を歩いている部分になります。
animation-timelineを使います。
対応しているのが
Chromeぐらいなので実務ではまだ難しいかもしれないです
人に対して、animationを設定します。
あとは
animation: fadeIn linear both animation-timeline: view()
@keyframesにて、translateで移動させています。
positionで調整しようかと思いましたが、バグってしまったので
移動系はtranslateがいいみたいです。
