Bubble Rise

Le code

Un aperçu du code source :

<div class="bubble-container" id="bubble-container">
    <!-- Bubbles added by JS -->
    <div class="bubble" style="width: 30.2983px; height: 30.2983px; left: 33.7572%; animation-duration: 5.17923s; animation-delay: 1.78081s;">
    </div>
    <div class="bubble" style="width: 49.7691px; height: 49.7691px; left: 6.38587%; animation-duration: 4.38331s; animation-delay: 1.85208s;">
    </div>
    <div class="bubble" style="width: 38.0812px; height: 38.0812px; left: 36.6408%; animation-duration: 6.66234s; animation-delay: 1.59819s;">
    </div>
    <div class="bubble" style="width: 10.9047px; height: 10.9047px; left: 59.8891%; animation-duration: 5.9666s; animation-delay: 0.167667s;">
    </div>

Cas d'usage concrets

Quelques contextes où Bubble Rise fait mouche :

• Le fond animé d'une page créative
• Un bouton vivant sur une landing
• L'ambiance d'une page événement

Comment ça marche

CSS + un petit script JavaScript vanilla (aucune dépendance). Il s'appuie sur animation @keyframes et transformations CSS (transform).

À personnaliser

Tu peux régler :

• la vitesse d'animation (actuellement 0s)

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajoute le petit script JavaScript avant </body> — c'est prêt.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre.

Plus d'effets Liquid

FAQ