CSSとJavaScriptでスクロールアニメーションを実装[fadein/blur]
案件で実装していたものを、使い回せるようにしたのでメモ。
共通: スクロールアニメーションの処理IntersectionObserver API という機能を利用し、スクロールによって対象要素が画面内に入ったかどうかを検出します。
画面内に入ったことが検出された要素には、activeClassName 変数として持っている .animated クラスが付与されます。これが追加されるとアニメーションが発火します。画面外に要素が出た場合にはクラスが削除されます。
画面内に入