ホームページの雰囲気をもっと楽しく、ポップにすることができるJavaScriptライブラリ「Beautiful bubbly backgrounds」をご紹介します。
ほんの少しのコードで、水玉がふわふわ動く背景を実装することができます。この記事では、実装の仕方やカスタマイズ方法までわかりやすく解説します。
完成デモの紹介
まずはデモをご覧ください。
See the Pen バブリーな背景 by はなはな氏 (@wxftomuu-the-selector) on CodePen.
HTML
HTMLでは、bubbly-bg の本体（JavaScriptライブラリ）を CDN から読み込むだけでOKです。
これだけでページ全体に泡のような背景エフェクトを追加できるようになります。
<!-- bubbly-bg ライブラリをCDNから読み込み -->
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>
<h3>バブリーな背景</h3>JS
bubbly-bg の bubbly() 関数を使うと、背景の色や泡の数、ぼかし具合などを細かく設定することができます。
設定次第で簡単に自分好みの「バブリーな背景」を作れます。
// bubbly-bg ライブラリの設定を行い
// 背景エフェクトをカスタマイズする
// ----------------------------------
bubbly({
colorStart: '#fff', // 背景のグラデーション開始色
colorStop: '#fff', // 背景のグラデーション終了色
blur: 1, // 泡のぼかし量（値が大きいほどふんわり）
bubbles: 15, // 表示する泡の数
compose: 'source-over', // 描画モード（重ね合わせ方）
bubbleFunc: () => `hsla(${Math.random() * 200}, 100%, 50%, .3)` // 泡の色や透明度をランダムに決定する関数
});
下記の項目を調整することで、好みに合わせてバブリーな背景を自由にカスタマイズできます。
| パラメータ | 説明 | デフォルト値 |
|---|---|---|
| animate | アニメーションをするかどうかの設定。 | true |
| blur | 泡のぼかし具合 | 4 |
| bubbleFunc | 泡の色彩 | bubbleFunc:() => ‘hsla(0, 0%, 100%, ${r() * 0.1})’) |
| bubbles | 泡の数 | Math.floor((canvas.width + canvas.height) * 0.02); |
| canvas | 描画する要素 | body要素 |
| colorStart | 背景グラデーション始まりの色 | blue-ish |
| colorStart | 背景グラデーション終わりの色 | blue-ish |
| compose | 要素の合成方法 | lighter |
| shadowColor | 影の色 | #fff |
| angleFunc | 泡の動く方向 | angleFunc:() => Math.random() * Math.PI * 2 |
| velocityFunc | 泡の動く速さ | velocityFunc:() => 0.1 + Math.random() * 0.5 |
| radiusFunc | 泡の大きさ | radiusFunc:() => 4 + Math.random() * width / 25 |
まとめ
以上のように、bubbly-bg を使えば、わずかなコードで簡単に動きのある「バブリーな背景」を作ることができます。豊富なオプションを組み合わせることで、自分好みのデザインにカスタマイズすることも可能です。
さらに詳しい情報については、開発元であるBeautiful Bubbly Backgroundsをご覧ください。このような素晴らしいライブラリを開発・公開してくださった関係者の皆様に、心より感謝申し上げます。
なお、弊社では「サイトの更新まで手が回らない…」という方向けに、更新作業の代行や技術的なサポートも承っております。「同じように実装したけれどうまく動かない」などお困りの際は、お気軽にご相談ください。
少しでもこの記事がお役に立てれば幸いです。最後までお読みいただき、ありがとうございました。
