Intersection Observerでスクロールアニメーションをやってみた - Qiita

動きのあるサイトは見てて楽しくていいですね。 スマホの縦スクロールを生かしたサイトなど憧れます。 Qiitaの横にある目次もそうですが、スクロールに連動して変化するものはよく見るのでやってみたいなと思いました。 作ったもの 文字や画像がフェードインするやつをやってみました。 今回作ったのはこちら 下にスクロールするとエレベーターが下がります。 1階下がる毎に1人乗って、1階に着いたら全員降りるというのを表現してみました。 説明しないとよくわかんなくなりました。 参考にさせていただいたのはこちら Intersection Observerを使いました 従来はJavaScriptの scroll というイベントを利用することが多かったようです。 しかし画面サイズが変わったら再計算しないといけず、スクロールやリサイズのたびに呼び出されるため、パフォーマンスへの悪影響が懸念されるとのこと。 Int