// スクロールしたら、ふぁっと表示させる
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
メソッドを使用して各対象要素を監視します。