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. Menu Droplet Animation
  2. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  3. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  4. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  5. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  6. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP