漂亮的动态气泡背景效果bubbly-bg.js插件

2年前 2019-07-06 11:00:02 阅读量:1048,日阅读:3,周阅读:9,月阅读:46 1条

bubbly-bg.js是一款漂亮的动态气泡背景js插件。它是基于HTML5 canvas,压缩后的版本小于1kb,但是它能制作出各种漂亮的动态气泡背景效果,非常强大。

github地址:https://github.com/tipsy/bubbly-bg

HTML结构

<body>
  ...
  <script src="js/bubbly-bg.js"></script>
  <script>bubbly();</script>
</body>

在线demo:https://tipsy.github.io/bubbly-bg

bubbly-bg.js动态气泡背景插件的可用配置参数有:

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

默认蓝色

bubbly();

黑红

bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});

紫色

bubbly({
    colorStart: "#4c004c",
    colorStop: "#1a001a",
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
});

黄色/粉色,带红色/橙色/黄色气泡

bubbly({
    colorStart: "#fff4e6",
    colorStop: "#ffe9e4",
    blur: 1,
    compose: "source-over",
    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});
标签: 插件
顶一下
(1)
100%
踩一下
(0)
0%

非特殊说明,本博所有文章均为博主原创。

评论1发表评论
快乐浪子哥快乐浪子哥管理员
欢迎评论,哈哈!
2020-05-30 20:28:04 · 湖北 仙桃 · Windows 10 x64 · Google Chrome 83.0.4103.61回复