木ミニ
木
木ミニ
木ミニ

ブログ

2024.01.22

【cssで実装】スクロール量に合わせてアニメーション

cssでスクロール量に合わせてアニメーションすることができるようになったみたいなので

試してみました。

本サイトのトップページで実装してみた、

人間がスクロールに合わせて道を歩いている部分になります。

animation-timelineを使います。

対応しているのが

Chromeぐらいなので実務ではまだ難しいかもしれないです

人に対して、animationを設定します。

あとは

animation: fadeIn linear both 
animation-timeline: view()

@keyframesにて、translateで移動させています。

positionで調整しようかと思いましたが、バグってしまったので
移動系はtranslateがいいみたいです。

css HTML