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

関連記事

  1. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  2. Simple Lightbox
  3. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  4. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

  5. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  6. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP