Webは雑誌や新聞などと異なり、ダイナミックに動かせるのが魅力です。さらにテレビと異なり、ユーザの操作によって表示を変化させられます。動画サイトなどだけでなく、普通のWebサイトだってできるのです。 そんな特徴を活かしたのがbubbly-bgです。背景にバブルを表示し、アニメーションさせます。

bubbly-bgの使い方

ブルー。

赤茶色。

紫。

サーモン。

bubbly-bgは次のような関数で実行します。オプションは様々にありますが、指定しなくとも動きます。関数（アルゴリズム）を変えれば動きも変化します。

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-bgを使うと背景が滑らかに動くコンテンツを提供できます。しかもユーザが選択すれば色や動きを変えられるようにできます。Webらしいコンテンツと言えるでしょう。

bubbly-bgはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

デモ tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (696 bytes gzipped)