Intersection ObserverAPIとは
直訳すると「Intersection（要素間交差）」を「Observe（監視）」するAPIです。
指定した要素がブラウザと交差したタイミングで、処理を発火させることができます。
スクロールしてターゲット要素が見えたらフワッと表示させるあのアニメーションなどが実装できます。
サンプルソース
script.js
const texts = document.querySelectorAll('.text'); //監視したいDOM要素格納
const imgs = document.querySelectorAll('.img_bg_box'); //監視したいDOM要素格納。今回は二種類のクラスを監視対象にしたいため。
//const text = document.querySelector('.text'); ->要素が一個だけならこれ。
const cb = function(entries,observer) {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('fade-in'); //監視対象が画面と交差したらfade-inクラス付与
// observer.unobserve(entry.target); -> 監視停止。true条件に記述することで監視対象要素が画面と交差したら監視を停止する。
} else {
entry.target.classList.remove('fade-in') //画面外に出たらfade-inクラス削除
}
})
}
const options = {
root: null,
// 親要素や先祖要素を入れて、交差対象を調整できる
rootMargin: "-100px 0px",
// 交差の判定にmarginをつけることができる。初期値は0なので、ブラウザに入った瞬間処理が発火する。
// -は内側を意味するので、上記の場合はブラウザの上下100px内側に入ったら処理が発火する。
//cssと同じような記述のショートハンドができるが、0であっても必ずpxか%とつけないといけない。
threshold: 0.5
// 交差の起点を設定できる。値は交差している割合。
// 初期値が0。
// 0は画面に監視対象が入った瞬間が起点。
// 1は画面に監視対象が全て入った瞬間が起点。
// 配列の形でも記述できる。
};
// IntersectionObserverクラスにはオプションを設定したオブジェクトを第二引数に取ることもできる。
// 上記にようにオブジェクトリテラルで、定数にオブジェクトの形で代入してオプション設定する。
const io = new IntersectionObserver(cb, options);
// IntersectionObserverオブジェクトのインスタンス生成。
// オプションを設定したい場合は、上記のように第二引数に、オプション格納した定数を渡す。
// オプション設定してないなら、第二引数はいらない。
texts.forEach(text => io.observe(text)); //監視したいdom要素が複数あった場合の構文。
imgs.forEach(img => io.observe(img));
//io.observe(text); ->監視したいdom要素が一つの場合はこれだけでok
解説
コールバック関数定義
script.js
const cb = function(entries,observer) {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('fade-in');
} else {
entry.target.classList.remove('fade-in')
}
})
}
こちらのコールバック関数定義部分。発火した際に行われる処理です。
const cb = function() {
entry.target.classList.add('fade-in');
}
上記のような記述だけでも機能するが、 （entries）,（observer）という引数を取ることができます。
if文の条件文にentries.isIntersectingプロパティを記述することで、処理を分けることが可能です。
監視対象DOMがwindowに交差したらisIntersectingはtrueに、画面から出たら、isIntersectingはfalseに処理が移ります。
オプション設定
script.js
const options = {
root: null,
rootMargin: "-100px 0px",
threshold: 0.5
};
IntersectionObserverはオブジェクトの形で三つのオプションを設定できます。
const io = new IntersectionObserver(cb, options);でインスタンス化する際にオプションを設定したオブジェクトを第二引数に取ることができます。