Étape 4 : JS - La Fabrique de Bulles

Nous allons créer un script qui génère des bulles en boucle, avec des tailles et des positions aléatoires.

1. Fonction de création de bulle

Ouvrez script.js.

const bubbleContainer = document.getElementById('bubble-container');

function createBubble() {
    // 1. Création de l'élément HTML
    const bubble = document.createElement('span');
    bubble.classList.add('bubble');

    // 2. Taille aléatoire (entre 20px et 80px)
    const size = Math.random() * 60 + 20 + 'px';
    bubble.style.width = size;
    bubble.style.height = size;

    // 3. Position horizontale aléatoire (0% à 100% de la largeur)
    bubble.style.left = Math.random() * 100 + '%';

    // 4. Durée d'animation aléatoire (pour que certaines aillent plus vite)
    // Entre 4s et 12s
    bubble.style.animationDuration = Math.random() * 8 + 4 + 's';

    // 5. Ajout au conteneur
    bubbleContainer.appendChild(bubble);

    // 6. Nettoyage !
    // Très important : quand l'animation est finie (après max 12s), on supprime l'élément
    // Sinon le navigateur va ramer au bout de 5 minutes avec 10000 bulles cachées en haut.
    setTimeout(() => {
        bubble.remove();
    }, 12000); // 12000ms = 12s (durée max)
}

2. Génération automatique

Pour avoir un flux constant, on utilise setInterval.

// Crée une bulle toutes les 300 millisecondes
setInterval(createBubble, 300);

Si vous voulez plus de bulles, baissez le chiffre (ex: 100). Moins de bulles ? Augmentez (ex: 1000).

3. Bonus : Créer au clic

On a promis dans le HTML qu’on pouvait cliquer pour créer des bulles.

document.addEventListener('click', (e) => {
    // On crée 5 bulles d'un coup
    for (let i = 0; i < 5; i++) {
        createBubbleAt(e.clientX, e.clientY);
    }
});

// Une variante de notre fonction qui accepte une position précise
function createBubbleAt(x, y) {
    const bubble = document.createElement('span');
    bubble.classList.add('bubble');

    // Taille un peu plus petite pour le clic
    const size = Math.random() * 40 + 10 + 'px';
    bubble.style.width = size;
    bubble.style.height = size;

    // Position exacte de la souris
    bubble.style.left = x + 'px';
    bubble.style.top = y + 'px'; // On défini le TOP car on ne part pas du bas

    // On écrase l'animation par défaut pour qu'elle parte de là où on est
    bubble.style.animation = 'floatUp 4s forwards ease-out';

    bubbleContainer.appendChild(bubble);

    setTimeout(() => {
        bubble.remove();
    }, 4000);
}

Il faut ajouter cette nouvelle animation floatUp dans le CSS (ou juste modifier le JS pour qu’il soit compatible, mais le plus simple est de laisser le setInterval gérer le fond et le clic gérer des explosions de bulles).

Pour faire simple dans ce tutoriel, contentons-nous de la version automatique setInterval(createBubble, 300); qui est déjà très jolie.

Ajoutez juste ceci pour que le clic lance aussi la fonction de base (même si la bulle partira du bas) :

document.addEventListener('click', () => {
    createBubble();
    createBubble();
    createBubble();
});

---

Résultat

Ouvrez index.html. Vous devriez voir un fond calme et des bulles qui montent sans fin. C’est relaxant et le code est très léger !