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

2019-07-06 11:00:02 总阅读量:166,本日阅读:4,本周阅读:15,本月阅读:166 0条

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)`
});

标签插件

下一篇jQuery重置form表单

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

如若转载，请注明出处：https://www.ihulang.com/index/info/14.html

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

栏目分类

广而告之

标签云

友情链接申请