index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {margin: 0; padding: 0;}
    </style>
</head>
<body>

<div id="img" style="height: 600px;"></div>

<script src="static/main.js"></script>
<script>

    var bm;

    window.onload = function () {
        var bubbleManager;

        bm = bubbleManager = new BubbleManager({
            element: document.getElementById("img"),
            backgroundImage: "url(static/img/0.jpg)",
            tick: 50,
            minSpeed: 10,
            maxSpeed: 30,
            bubbleFrom: Direct.BOTTOM,
            minRadius: 8,
            maxRadius: 20,
            distance: 200,
            numBubble: 200,
            color: function() {
                var colors = ["#ffffff22", "#bf000022", "#0dc50022", "#1d4eb422", "#d1579f22"],
                    i = Math.floor(Math.random() * colors.length);

                return parseHexColor(colors[i]);
            }
        });

        bubbleManager.startLoop();

    };
</script>
</body>
</html>