スクロールに合わせて背景画像にブラー効果を！JavaScriptで実装する方法

<div class="content blur-background">
  <div class="background"></div>
  <div class="text">
    <h1>スクロールで背景にブラー</h1>
    <p>スクロールすると背景画像がぼやけます！</p>
  </div>
</div>

<div class="content white-background">
  <div class="background"></div>
  <div class="text">
    <h1>背景が白いコンテンツ</h1>
    <p>これは背景が白くなるコンテンツです。</p>
  </div>
</div>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  overflow-x: hidden; /* 横スクロール防止 */
}

.content {
  position: relative;
  width: 100%;
}

.blur-background {
  height: 300vh; /* このセクションの高さを300vhに設定 */
}

.white-background {
  height: 100vh; /* このセクションの高さを200vhに設定 */
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://as1.ftcdn.net/v2/jpg/03/90/63/84/1000_F_390638401_HbagabflE6cevPucZM5drrajYvPBnIYv.jpg') no-repeat center center;
  background-size: cover;
  transition: filter 0.3s ease, opacity 0.3s ease; /* 不透明度とフィルタにトランジションを追加 */
  z-index: -1;
  will-change: filter, opacity; /* パフォーマンス向上 */
}

.text {
  position: sticky; /* スクロールに合わせてテキストが固定される */
  top: 50px; /* スクロール時に少し余白を取る */
  z-index: 1;
  padding: 50px;
  text-align: center;
}

h1 {
  font-size: 3rem;
  color: white;
}

p {
  font-size: 1.5rem;
  color: white;
}

window.addEventListener('scroll', function() {
  const backgrounds = document.querySelectorAll('.background');
  const blurContent = document.querySelector('.blur-background');
  const whiteContent = document.querySelector('.white-background');
  const scrollPosition = window.scrollY;

  const textElements = document.querySelectorAll('.blur-background .text h1, .blur-background .text p'); // h1とpを取得

  // blur-backgroundが表示されている部分
  const blurContentPosition = blurContent.offsetTop;
  const whiteContentPosition = whiteContent.offsetTop;

  // ブラーをかけ始めるためのスクロール距離
  const startBlurDistance = 500; // 500pxスクロールしたらブラー開始

  // blur-backgroundが表示される範囲
  if (scrollPosition >= blurContentPosition && scrollPosition < whiteContentPosition) {
    // スクロールが一定距離を超えてからブラーを適用
    if (scrollPosition > startBlurDistance) {
      const blurAmount = Math.min((scrollPosition - startBlurDistance) / 2, 500); // スクロール開始からの距離でブラー量を決定
      const opacityAmount = Math.max(1 - (scrollPosition / 1000), 0); // 透明度を減少させる

      backgrounds.forEach(background => {
        background.style.filter = `blur(${blurAmount}px)`; // ブラーを適用
        background.style.opacity = opacityAmount; // 透明度を減少
      });

      // h1とpの透明度をスクロールに応じて減少
      textElements.forEach(text => {
        const textOpacity = Math.max(1 - (scrollPosition / 1000), 0); // 透明度を減少させる
        text.style.opacity = textOpacity;
      });
    } else {
      // スクロール位置がstartBlurDistanceより小さくなったらリセット
      backgrounds.forEach(background => {
        background.style.filter = 'blur(0px)';
        background.style.opacity = 1; // 元の透明度に戻す
      });

      textElements.forEach(text => {
        text.style.opacity = 1; // 元の透明度に戻す
      });
    }
  }

  // white-backgroundが表示される部分
  if (scrollPosition >= whiteContentPosition) {
    // 背景を完全にフェードアウト
    backgrounds.forEach(background => {
      background.style.filter = 'blur(0px)';
      background.style.opacity = 0; // 背景画像を完全に消す
    });

    // h1とpの透明度を0に
    textElements.forEach(text => {
      text.style.opacity = 0;
    });
  }
});