スクロールに合わせてJavaScriptを実行 IntersectionObserver

はじめに

スクロール追従を利用して ・テキストのアニメーション ・画像や装飾の表示遅延 などを行いたいと思いIntersectionObserverというAPIを使って 以上のことを実現する。

IntersectionObserverを使ってスクロールに合わせて
アニメーションを発火させてみます。

See the Pen Untitled by wataruNakai (@wataruNakai) on CodePen.

childを監視対象として登録しchildの要素が決められた範囲に入ることでクラスinviewを付与する仕組み。

以下javascriptへ記述する際の必要手順と必要要素
・ioに監視したい対象のDOMを登録する
・childを監視対象とし画面外に出た時と画面内に入ったときにインターセクションオブザーバーの監視によってコールバック関数cdをその都度呼び出す
・entry.targetには取得したDOM情報が格納されている
・if文でtrueであれば取得したchildにinviewをクラス付与しfalseであればremoveメソッドでinviewのクラスを削除する

・optionsをオブジェクトリテラルで定義してプロパティを定義する。
・root：（交差対象とした親の要素をすることができる）大体nullと設定する（viewport）
・rootMargin:（親の範囲のどこから交差点とするか設定できる）
"-100px 0px 0px 0px"←上の画面から-100pxの値から交差点になる。
・threshold:（0-1まで設定できる）上から入る場合は下辺が0上辺が1下から出る場合は上辺が0下辺が1となる