JSとCSSでふわふわと漂う泡のアニメーションを実装する方法【自作＆jQueryなし】

<div class="bubble-background">
<!-- ここに好きなコンテンツを入れる -->
</div>

.bubble-background {
  position: relative;
  background-color: #000;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* 泡の見た目 */
.bubble {
  position: absolute;
  bottom: -50px;
  background-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
  animation: bubble 8s linear infinite;
}

/* 泡の一番明るい部分を疑似要素で表現 */
.bubble::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(0.25) translate(-70%, -70%);
  background: radial-gradient(rgba(255,255,255, 0.5), transparent);
  border-radius: 50%;
}

/* 泡が上に浮かび上がっていくアニメーション */
@keyframes bubble {
  0% {
    transform: translatY(0);
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh);
    opacity: 0;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // コンテナを指定
  const section = document.querySelector('.bubble-background');

  // 泡を生成する関数
  const createBubble = () => {
    const bubbleEl = document.createElement('span');
    bubbleEl.className = 'bubble';
    const minSize = 10;
    const maxSize = 50;
    const size = Math.random() * (maxSize + 1 - minSize) + minSize;
    bubbleEl.style.width = `${size}px`;
    bubbleEl.style.height = `${size}px`;
    bubbleEl.style.left = Math.random() * innerWidth + 'px';
    section.appendChild(bubbleEl);

    // 一定時間が経てば泡を消す
    setTimeout(() => {
      bubbleEl.remove();
    }, 8000);
  }

  // 泡の生成を開始するトリガー（初期値はOFF）
  let activeBubble = null;

  // 泡の生成をストップする関数
  const stopBubble = () => {
    clearInterval(activeBubble);
  };

  // Intersection observerに渡すコールバック関数
  const cb = (entries) => {
    entries.forEach(entry => {
      if(entry.isIntersecting) {
        activeBubble = setInterval(createBubble, 300);
      } else {
        stopBubble();
      }
    })
  };

  // Intersection observerに渡すオプション
  const options = {
    rootMargin: "100px 0px"
  }

  // Intersection observerの初期化
  const io = new IntersectionObserver(cb, options);
  io.POLL_INTERVAL = 100; // Polyfill
  io.observe(section);
});

  <script src="intersection-observer.js"></script>
  <script src="main.js"></script>
</body>
</html>

const section = document.querySelector('.bubble-background');

const createBubble = () => {
  const bubbleEl = document.createElement('span'); // spanタグを生成
  bubbleEl.className = 'bubble'; // 泡に'bubble'というクラスを付ける
  const minSize = 10; // 泡の最小サイズを指定
  const maxSize = 50; // 泡の最大サイズを指定
  const size = Math.random() * (maxSize + 1 - minSize) + minSize; // 上で指定した範囲の中からランダムでサイズを設定
  bubbleEl.style.width = `${size}px`; // 取得したランダムなサイズを泡の横幅に指定
  bubbleEl.style.height = `${size}px`; // 取得したランダムなサイズを泡の縦幅に指定
  bubbleEl.style.left = Math.random() * innerWidth + 'px'; // 泡が発生する位置をランダムで指定
  section.appendChild(bubbleEl); // 完成した泡をコンテナに挿入する

  // 一定時間が経てば泡を消す
  setTimeout(() => {
    bubbleEl.remove();
  }, 8000); // 泡を消すまでの時間をミリ秒単位で指定
}

const size = Math.random() * (maxSize + 1 - minSize) + minSize;

bubbleEl.style.left = Math.random() * innerWidth + 'px';

// 一定時間が経てば泡を消す
setTimeout(() => {
  bubbleEl.remove();
}, 8000); // 泡を消すまでの時間をミリ秒単位で指定

// Intersection observerに渡すコールバック関数
const cb = (entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting) { // コンテナが画面内に入っているときの処理
      activeBubble = setInterval(createBubble, 300);
    } else { // コンテナが画面外にあるときの処理
      stopBubble();
    };
  });
};

// Intersection observerに渡すオプション
const options = {
  rootMargin: "100px 0px"
}

// Intersection observerの初期化
const io = new IntersectionObserver(cb, options);
io.POLL_INTERVAL = 100; // Polyfill
io.observe(section);

// Intersection observerに渡すコールバック関数
const cb = (entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting) { // コンテナが画面内に入っているときの処理
      activeBubble = setInterval(createBubble, 300);
    } else { // コンテナが画面外にあるときの処理
      stopBubble();
    };
  });
};

if(entry.isIntersecting) { // コンテナが画面内に入っているときの処理
  activeBubble = setInterval(createBubble, 300);
}

else { // コンテナが画面外にあるときの処理
 stopBubble();
};

// Intersection observerに渡すオプション
const options = {
  rootMargin: "100px 0px"
}

// Intersection observerの初期化
const io = new IntersectionObserver(cb, options);
io.POLL_INTERVAL = 100; // Polyfill
io.observe(section);