Étape 2 : HTML - Préparation de l’Animation

Dans ce projet, nous n’avons pas besoin de beaucoup plus de HTML. Cependant, pour préparer le terrain, nous allons nous assurer que notre conteneur principal est prêt à accueillir des centaines d’éléments <span> ou <div> qui représenteront chacun une bulle.

Il n’y a pas de modification HTML supplémentaire nécessaire par rapport à l’étape 1.

Le principe technique sera le suivant :

1. Le JavaScript va créer dynamiquement des balises <span class="bubble"></span>.
2. Il va les insérer dans <div id="bubble-container">.
3. Le CSS se chargera de les faire bouger.

Assurez-vous simplement que votre fichier index.html ressemble bien à ceci :

<body>
    <div id="bubble-container"></div>

    <div class="overlay">
        <h1>Bubble Generator</h1>
        <p>Cliquez n'importe où pour créer des bulles manuellement !</p>
    </div>

    <script src="script.js"></script>
</body>

C’est le projet idéal pour comprendre la manipulation du DOM (Document Object Model) pure : créer, styliser, insérer et supprimer des éléments à la volée.