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. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  2. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  3. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  4. jquery.adaptive-backgrounds.js
  5. Multi-level push menu
  6. Zoomerang.js

最近の記事

  1. 岩木山
  2. パーソナルパーティション

アーカイブ

PAGE TOP