【bubbly】Javascriptで簡単にできる美しい泡のアニメーション、「Beautiful bubbly backgrounds」

2020年7月15日2021年7月31日

こんにちは、ハル@haru_elpisです。

Javascriptで簡単に美しい泡が表現できる、Beautiful bubblyの紹介です。

↓サンプルはこちら。

サンプル : https://tipsy.github.io/bubbly-bg/

・導入の方法

まずはGitHubにて配布されている本体ファイルをダウンロードします。

GitHub : https://github.com/tipsy/bubbly-bg

上記サイトから、「Clone or download」をクリックするとダウンロードが可能です。

ここで入手したzipファイルを解凍すると「bubbly-bg.js」というJavaScriptが展開されます。

「bubbly-bg.js」が読み込みやすいようにHTMLファイルに近い場所に置いておくと良いでしょう。
これをHTMLの「haed」で読み込みます。

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

背景色や泡の色、ぼかし効果などを変更したい場合は次のオプション設定で細かく指定することができます。

・オプション設定

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

なお「compose」で指定するのはcanvas要素のglobalCompositeOperation属性で、次の値が用意されています。

source-atop
source-in
source-out
source-over
destination-atop

通常は「lighter」「darker」「source-over」あたりを指定するのが一般的でしょうか。

例　ピンク色

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