Home Web 【JavaScript】パーティクルの背景アニメーションを実装できる「bubbly-bg」の使い方

【JavaScript】パーティクルの背景アニメーションを実装できる「bubbly-bg」の使い方

bubbly-bg.js

とても簡単に背景にパーティクルのアニメーションが実装できるJavaScript「bubbly-bg」の使い方をご紹介します。

bubbly-bgの実装方法

GitHub – tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped)

上記リンクのサイトで「Clone or download」を選択し、「Download ZIP」をクリックすれば、ファイル一式をダウンロードできます。

ダウンロードしたZIPファイルを解凍し、その中にある「bubbly-bg.js」というJavaScriptファイルを使用します。

下記のようにHTML内に記述して、実装完了です。とても簡単。


<script src="js/bubbly-bg.js"></script>
<script>bubbly();</script>

オプション


bubbly({
    animate: false, // default is true
    blur: 1, // default is 4
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
    bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
    canvas: document.querySelector("#background"), // default is created and attached
    colorStart: "#4c004c", // default is blue-ish
    colorStop: "#1a001a",// default is blue-ish
    compose: "lighter", // default is "lighter"
    shadowColor: "#0ff", // default is #fff
    angleFunc: () => Math.random() * Math.PI * 2, // default is this
    velocityFunc: () => 0.1 + Math.random() * 0.5, // default is this
    radiusFunc: () => 4 + Math.random() * 25 // default is 4 + Math.random() * width / 25
});

  • animate:アニメーションするかどうか
  • blur:泡のぼかし具合
  • bubbleFunc:泡の色彩
  • bubbles:泡の数
  • canvas:描画する要素
  • colorStart:背景色のグラデーション
  • ColorStop:背景色のグラデーション
  • compose:要素の合成方法
  • shadowColor:影の色
  • angleFunc:泡の動く方向
  • velocityFunc:泡の動く速さ
  • radiusFunc:泡の大きさ

公式のデモページ

公式のデモページでは、6種類のサンプルが用意されており、それぞれの「Copy Config」ボタンをクリックすると、そのオプションのJavaScriptのコードをコピーすることができます。

カスタマイズ

僕もデモを作ってみました。

DEMO bubbly-bg | MISOBLOG

オプションはこんな感じで書いてます。


bubbly({
    colorStart: "#fff",
    colorStop: "#fff",
    blur: 1,
    bubbles: 220,
    compose: "source-over",
    shadowColor: "#5DB09B",
    radiusFunc: () => Math.random() * 15,
    bubbleFunc: () => `hsla(0, 0%, 80%, ${Math.random() * 0.25})`,
});


jQueryを使用せずに使えて、とても簡単にオシャレなページが作成できるので良いですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.