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. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  2. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  3. LC Micro Slider
  4. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  5. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  6. Water Wave Effect jQuery

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP