ウェブページの背景に動きのある美しい泡を表現できるJavaScriptライブラリ［Beautiful bubbly backgrounds］を紹介します。

Beautiful bubbly backgrounds

↓サンプルはこちら。

サンプル : https://on-ze.com/demo/js-bubbly-bg/

導入方法

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

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

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

ここで入手したzipファイルを解凍すると「bubbly-bg.js」というJavaScriptが展開されます。
これをHTMLの適当な箇所で読み込みましょう。
また初期化するためのコードも同時に記述しておきます。

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

それぞれ次のような意味。

  1. animate - アニメーションするか否か
  2. blur - ぼかし処理の度合い
  3. bubbleFunc - 泡の色彩
  4. bubbles - 泡の数
  5. canvas - 描画する要素
  6. colorStart - 背景色のグラデーション（スタート）
  7. colorStop - 背景色のグラデーション（エンド）
  8. compose - 要素の合成方法
  9. shadowColor - 泡の影

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

  • source-atop
  • source-in
  • source-out
  • source-over
  • destination-atop
  • destination-in
  • destination-out
  • destination-over
  • lighter
  • darker
  • copy
  • xor

通常は「lighter」「darker」「source-over」あたりを指定するのが一般的でしょうか。
それぞれがどのように描画されるかは、言葉での説明よりも実際に１つずつ試してみて理解するのがイイと思います。

jQueryなどに依存せず、単体で使えるのが嬉しいポイントです。
またデータ容量も軽いので気軽に使えそうですね。
ぜひお試しください。

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