// スクロール時に画像を表示するJavaScript
document.addEventListener('DOMContentLoaded', function() {
// アニメーション対象の画像を取得
const images = document.querySelectorAll('.wp-block-image img, .swell-block-image img, img.slide-up, .slide-up-large');
// Intersection Observerの設定
const observerOptions = {
root: null,
rootMargin: '0px 0px -100px 0px', // 画面下から100px手前で発火
threshold: 0.1
};
// 画像が表示されたときの処理
const observerCallback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
// 一度表示したら監視を解除（オプション）
observer.unobserve(entry.target);
}
});
};
// Observerを作成
const observer = new IntersectionObserver(observerCallback, observerOptions);
// 各画像を監視対象に追加
images.forEach(image => {
observer.observe(image);
});
});