bubbly-bg - 背景でバブルが動くアニメーション
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)