// スクロールしたら、ふぁっと表示させる
const targets = document.querySelectorAll(".fade");
const observerCallback = (entries, observer) => {
for (let entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("active");
} else {
entry.target.classList.remove("active");
}
}
};
const observerOptions = {
// オプションを設定(必要に応じて)
};
const observer = new IntersectionObserver(observerCallback, observerOptions);
for (let target of targets) {
observer.observe(target);
}
document.querySelectorAll(".fade")で指定されたクラス名の要素をすべて取得し、targetsに保存します。
IntersectionObserverのコールバック関数であるobserverCallbackは、監視している要素が表示されるときには”active”クラスを追加し、表示されないときには”active”クラスを削除します。
IntersectionObserverのオプションはobserverOptionsオブジェクトに格納され、これには必要に応じて様々なオプションが設定できます。例えば、root(ルート要素)、threshold(表示されているとみなすための割合)、rootMargin(ルートのマージン)などがあります。
new IntersectionObserver(observerCallback, observerOptions)でIntersectionObserverを作成し、observeメソッドを使用して各対象要素を監視します。