bubbly-bg.jsダイナミックバブルバックグラウンド効果の実現

前言
bubbly-bg.jsはHTML 5キャンバスに基づいており、圧縮されたバージョンは1 kb未満ですが、様々なきれいなダイナミックバブルバックグラウンド効果を生み出すことができ、非常に強力です.
使用
npmでbubbly-bgをインストールことができる.jsダイナミックバブルバックグラウンドプラグイン.

npm install bubbly-bg --save

ページでデートできます.jsファイル.

HTML をコンテナとして しない 、またはbodyでプラグインを する 、プラグインはbodyの に を します.この はposition: fixedおよびz-index: -1のプロパティを ち、その と さは にビューポートの と さに しくなります. :

  ...
  
  bubbly();

  をダイナミックバブルバックグラウンドのコンテナとして指定することもできます.例:

次に、以下の方法で初期化します.

bubbly({
  canvas: document.getElementById("demo")
});

構成パラメータ
bubbly-bg.jsダイナミックバブルバックグラウンドプラグインの使用可能な構成パラメータは、 です.

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

例:黄色/ピンクに赤/オレンジ/黄色のバブル効果:

bubbly({
    colorStart: "#fff4e6",
    colorStop: "#ffe9e4",
    blur: 1,
    compose: "source-over",
    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});