スクロールでぼけた画像が元に戻る！スムーズなぼかしアニメーションの実装方法

×

document.addEventListener('DOMContentLoaded', () => {
    // ぼかしを適用する画像をクラス名 "distorted" で取得
    const distortedImages = document.querySelectorAll('img.distorted');

    // 画像が画面に入ると復元する
    function checkVisibility() {
      const windowHeight = window.innerHeight;

      distortedImages.forEach((image) => {
        const rect = image.getBoundingClientRect();
        const isVisible = rect.top >= 0 && rect.bottom <= windowHeight;

        if (isVisible) {
          image.classList.remove('distorted');
          image.classList.add('restored');
        } else {
          image.classList.remove('restored');
          image.classList.add('distorted');
        }
      });
    }

    // 初回チェック
    checkVisibility();

    // スクロールイベントで可視性チェック
    window.addEventListener('scroll', checkVisibility);
});

<div class="gallery">
<img class="distorted thumbnail" src="/wp-content/uploads/2025/01/射的の屋台（日中）.jpg" alt="射的の屋台（日中）" width="1920" height="1080" class="aligncenter size-full wp-image-538" />
<img class="distorted thumbnail" src="/wp-content/uploads/2024/12/文化系の部室（日中）.jpg" alt="文化系の部室（日中）" width="1920" height="1080" class="aligncenter size-full wp-image-546" />
</div>

/* class="distorted" がついている画像のみぼかし */
img.distorted {
	filter: blur(8px);
}

/* 画像が画面内に入ったときに元に戻すスタイル */
img.restored {
	filter: none;
}

/* ぼかしをスムーズに戻すためのトランジション */
img.distorted, img.restored {
	transition: filter 1s ease-in-out; /* ぼかしにのみトランジション */
}