bubbly-bg- 好看的 js 網頁動態泡泡背景效果

bubbly-bg 是一個可以快速製作漂亮的動態泡泡背景效果的套件，使用的效果如下：

使用方法就是先把 js 讀入：

https://cdn.jsdelivr.net/npm/[email protected]/dist/bubbly-bg.js

接著套用即可

bubbly();

官網也提供了不少參數可以使用，完整的如下：

bubbly({
    animate: false, // default is true
    blur: 1, // default is 4
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
    bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
    canvas: document.querySelector("#background"), // default is created and attached
    colorStart: "#4c004c", // default is blue-ish
    colorStop: "#1a001a",// default is blue-ish
    compose: "lighter", // default is "lighter"
    shadowColor: "#0ff", // default is #fff
    angleFunc: () => Math.random() * Math.PI * 2, // default is this
    velocityFunc: () => 0.1 + Math.random() * 0.5, // default is this
    radiusFunc: () => 4 + Math.random() * 25 // default is 4 + Math.random() * width / 25
});

可以自己調看看調成自己喜歡的樣子再加到網站上。