透明感ある泡をアニメーションでふわふわ浮遊させるbubbly.js

今日はあいにくの雨ですが・・・桜の開花が待ち遠しい今日この頃ですね( ˘͈ ᵕ ˘͈ )♡
今回は、背景に泡をアニメーションでふわふわ浮遊させる超軽量スクリプトbubbly-bg.jsをご紹介します。

背景に泡をアニメーションでふわふわ浮遊させる超軽量スクリプト(※IE非対応)です。
コードも短く単独で使用可能なためお手軽に実装できます。

暗い背景の場合はイルミネーションのように光り輝く演出もできそうです!
淡いかわいらしい色のグラデーションももちろんですし、色のチョイス次第でロマンチックな雰囲気を出せそうですね。

ターゲットが女性のサイトを作成するときにおすすめ♪

実装方法はとっても簡単です。

GitHubからbubbly-bg.jsをDLします。

「Clone or download」をクリックするとDLが始まります。

②実装したいページに以下のコードを記述します。
▼JavaScript

これで実装完了です!

ですが、オプションを指定することで、泡のぼかし具合・数・色などが変更可能です。

参考にデモ用ページで指定したオプション込みのコードも記載します。
泡の色はhslaで指定されているので、透明度も変更できます。

いろいろと調整してみてくださいね♪

今回、参考にさせていただいたのは、
『ONZE/BLOG』さんです。
ありがとうございます!

デモページは、こちら