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

はじめまして、藤木と申します。 Webサイト制作を行っており、今行っている案件でバブルを表示させる必要があり、当サイトをご参考にさせていただきました。 1点教えていただきたいことがありまして、今は永続的に泡が発生していますが、泡の発生を断続的に行うことはできないでしょうか？具体的には、2秒間隔で泡を発生させたいと考えています。 setintervalで実装できるかと思い、色々試しましたが、動いてくれません。何卒ご教授のほどよろしくお願いいたします。藤木

はじめまして。記事を読んでくださりありがとうございます！以下のコードを一度試していただけますか？ 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 = `$px`; bubbleEl.style.height = `$px`; bubbleEl.style.left = Math.random() * innerWidth + "px"; section.appendChild(bubbleEl); // 一定時間が経てば泡を消す setTimeout(() => bubbleEl.remove(); >, 8000); >; // 泡の生成を開始するトリガー（初期値はOFF） let activeBubble = null; // 2秒間泡が発生した後、泡をストップ function bubbleTimer() activeBubble = setInterval(createBubble, 100); setTimeout(() => clearInterval(activeBubble); >, 2000); > // 4秒ごとに↑を繰り返す setInterval(() => bubbleTimer(); >, 4000); // 最初の1回を実行 bubbleTimer(); >); 泡を2秒間生成→ストップを4秒ごとに繰り返しています。（Intersection Observerは複雑になるため省いています）よろしくお願いします！

藤木克信 より:

御回答ありがとうございます。実行したい挙動が実現でき、非常に助かりました。 1点確認させてください。画面に入ったときに泡を発生させ、画面から出たときに泡を停止させる「Intersection Observer」ですが、画面に入る前から泡を表示させても良い場合は、削除しても良いですよね？泡自体は、何秒後かに消えるようにされているため、問題ないように思うのですが、いかがでしょうか？質問の意図は、「Intersection Observer」があることで永続的に泡が発生して、目的の挙動をしなかったためです。以上、よろしくお願いいたします。

📎📎📎📎📎📎📎📎📎📎