
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
});
可以自己調看看調成自己喜歡的樣子再加到網站上。