bubbly-bg

JavaScript

幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実装することができます。1KB未満(gzipで696バイト)と非常に軽量です。水中に気泡がふわふわ浮かんでいるような、そんな心和む背景アニメーションをサイトに取り入れたい人は要チェックです。

bubbly-bg

デモ

サンプルは全部で4つ用意されていて、画面中央にある4つのサムネイル画像から好きなものをクリックすると、そのバブルがデモページの背景に適用されます。バブルの色によって雰囲気がけっこう変わりますね。

気泡はゆっくりと動くので、背景に使われていてもそんなに煩わしいと感じることもなさそうです。

バブルの色やブラー効果などはオプションから手軽に設定することができます。主なオプションは、animate、blur、bubbleFunc、bubbles、canvas、colorStart、colorStop、compose、shadowColorです。

オプションを利用して細かく自分好みにカスタマイズして使いたいという人にもピッタリですね。

というわけで、幻想的で美しく、ファイル容量も軽量なバブル背景を実装したい人は、ぜひ「bubbly-bg」をチェックしてみてはいかがでしょうか?

bubbly-bg

Micromodal.jsアクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」前のページ

固定されたフローティングメニューを実装できる「jquery-dice-menu」次のページno-image

最近の記事

  1. 桜
  2. ハニーコム
  3. ブリーズライト
  4. ペタコロ
  5. ジェットウォッシャー
PAGE TOP