【JavaScript】パーティクルの背景アニメーションを実装できる「bubbly-bg」の使い方

WEB 2018.08.17

とても簡単に背景にパーティクルのアニメーションが実装できるJavaScript「bubbly-bg」の使い方をご紹介します。

1 bubbly-bgの実装方法
2 オプション
3 カスタマイズ

bubbly-bgの実装方法

GitHub – tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped)

上記リンクのサイトで「Clone or download」を選択し、「Download ZIP」をクリックすれば、ファイル一式をダウンロードできます。

ダウンロードしたZIPファイルを解凍し、その中にある「bubbly-bg.js」というJavaScriptファイルを使用します。

下記のようにHTML内に記述して、実装完了です。とても簡単。


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

オプション


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

animate：アニメーションするかどうか
blur：泡のぼかし具合
bubbleFunc：泡の色彩
bubbles：泡の数
canvas：描画する要素
colorStart：背景色のグラデーション
ColorStop：背景色のグラデーション
compose：要素の合成方法
shadowColor：影の色
angleFunc：泡の動く方向
velocityFunc：泡の動く速さ
radiusFunc：泡の大きさ

公式のデモページ

公式のデモページでは、6種類のサンプルが用意されており、それぞれの「Copy Config」ボタンをクリックすると、そのオプションのJavaScriptのコードをコピーすることができます。

カスタマイズ

僕もデモを作ってみました。

DEMO bubbly-bg | MISOBLOG

オプションはこんな感じで書いてます。


bubbly({
    colorStart: "#fff",
    colorStop: "#fff",
    blur: 1,
    bubbles: 220,
    compose: "source-over",
    shadowColor: "#5DB09B",
    radiusFunc: () => Math.random() * 15,
    bubbleFunc: () => `hsla(0, 0%, 80%, ${Math.random() * 0.25})`,
});

jQueryを使用せずに使えて、とても簡単にオシャレなページが作成できるので良いですね。