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