水玉模様がふわふわ動く背景が簡単に作れるjQueryプラグイン「Beautiful bubbly backgrounds」の使い方

IT関連

ホームページを一気にオシャレにできるjQueryプラグインの「Beautiful bubbly backgrounds」を使ってみました。

基本的な使い方からオプションまでご紹介したいと思います。

基本設定

今回もCDNをして手軽にプラグインを読み込んでいきます。jsファイルをダウンロードして使いたい方はこちらからダウンロードできます。

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

まずは、読み込みです。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>
    </head>
    <body>
    </body>
</html>

次に、javascript部分を書いていきます。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>
    </head>
    <body>
        <script>
            bubbly();
        </script>
    </body>
</html>

これで表示させてみてください。デフォルトの背景ならこれだけでできます！

オプションの追加

これだけだとありきたりなデザインになってしまうので、オプションを追加して独自の背景を作っていきます。

オプションは下記のものがあります。

オプション値説明デフォルト値
animateアニメーションのON/OFFを設定します。
falseにすると背景が動かなくなります。		true
blurぼかしの強度を設定します。4
bubbleFunc○の色彩を設定します。() => ‘hsla(0, 0%, 100%, ${r() * 0.1})’)
bubbles○の数を設定します。Math.floor((canvas.width + canvas.height) * 0.02);
canvas描画する要素を設定します。
設定しない場合は、body要素に適用されます。		body要素
colorStart背景グラデーション始まりの色を設定します。blue-ish
ColorStop背景グラデーション終わりの色を設定します。blue-ish
compose要素の合成方法を設定します。“lighter”
shadowColor〇の影の色を設定します。#fff
angleFunc○の進行する向きを設定します。() => Math.random() * Math.PI * 2
velocityFunc○の進行する速さを設定します。() => 0.1 + Math.random() * 0.5
radiusFunc○の大きさを設定します。4 + Math.random() * width / 25

このうちのいくつかを実際に使ってみます。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>
    </head>
    <body>
        <script>
            bubbly({
                bubbleFunc: () => `hsla(60, 94%, 52%, 0.8)`,
                bubbles: 10,
                colorStart: "#000000", 
                colorStop: "#1D3156",
                angleFunc: () => 2.5,
                velocityFunc: () => 15,
                radiusFunc: () => 8
            });
        </script>
    </body>
</html>

超簡易的ですが、「夜空を駆ける流星」を作ってみました。

「bubbles」が1なので、ひとつの丸が延々とループして流れてきます。これを「10」にすると

流星群になります。

関数を使って動きに変化をつける

このままだと、全ての丸が同じ大きさで同じスピードで同じ方向に動いてしまいます。

「Func」の付いているオプションは、オプション値に関数を使うことができます。

またこのオプション値は、全ての丸に同じ値が設定されるわけではなく、例えばbubblesを10に設定すると、10個それぞれ別の関数の実行結果が適用されます。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>
    </head>
    <body>
        <script>
            bubbly({
                bubbleFunc: () => `hsla(60, 94%, 52%, 0.1)`,
                bubbles: 5,
                colorStart: "#000000", 
                colorStop: "#1D3156",
                angleFunc: () => 2.5 + Math.random() * 10,
                velocityFunc: () => 3 + Math.random() * 10,
                radiusFunc: () => 8 + Math.random() * 20
            });
        </script>
    </body>
</html>

「Math.random()」はjavascriptの関数で、0～1の小数点以下を含む数をランダムで生成します。最高値が1なので、適度に10倍にしています。

これを実行するとこのようになります。

bubblesの数は5にしていますが、5個の丸がそれぞれ異なる大きさ、進む方向、スピードとなっていることが分かります。

また、javascriptの三項演算子も使えるので、下記のように、100個に1個の確率で色を変えたり、進む方向を変えるといったことも可能です。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>
    </head>
    <body>
        <script>
            bubbly({
                bubbleFunc: () => Math.random() < 0.01 ? `hsla(320, 94%, 52%, 0.8)` : `hsla(60, 94%, 52%, 0.1)`,
                bubbles: 100,
                colorStart: "#000000", 
                colorStop: "#1D3156",
                angleFunc: () => Math.random() < 0.01 ? 2 : 6,
                velocityFunc: () => 3 + Math.random() * 5,
                radiusFunc: () => 3 
            });
        </script>
    </body>
</html>

※確率的に特殊な丸が出てこない場合がありますので、その場合はリロードしてみてください。

angleFuncの使い方

向きを決める「angleFunc」が少し難しいので、簡単に補足をしておきます。

僕は文系だったので、習った覚えがないのですが、弧度法で角度を出しているように思います。

度数法弧度法
0°0
30°π/6
45°π/4
60°π/3
90°π/2
120°2π/3
135°3π/4
150°5π/6
180°π
270°3π/2
360°2π

angleFuncを「0」にすると、左から右へ水平に移動します。

π（≒3.14）は、Math.PIで取得でき、これをangleFuncにそのまま設定すると、右から左に水平に移動します。

上記の表の通り、30°の角度をつけて移動させたい場合は、angleFuncに「Math.PI / 6」と設定すると、少し右下へ傾斜の付いた移動となります。

上から下に垂直に移動させるには、「Math.PI / 2」、逆に下から上に移動させる場合は「Math.PI * 3 / 2」とするとできます。

この辺りはややこしいので、実際に試しながらやってみると分かりやすいと思います。

composeについて

composeは正直なところよく分からなかったのですが、変えたときのサンプルを用意しました。

まず、背景を白から黒へ変化するグラデーションにして、丸を緑色にします。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>
    </head>
    <body>
        <script>
            bubbly({
                colorStart: "#fff",
                colorStop: "#000",
                bubbleFunc:() => `hsla(120, 100%, 50%, .3)`
            });
        </script>
    </body>
</html>

composeのデフォルト値は「lighter」のようですので、このまま表示してみます。

背景が白いところでは、丸も白くなっていて、背景が黒いところでは本来の色が出てきます。

次に、composeを「darker」にしてみます。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>
    </head>
    <body>
        <script>
            bubbly({
                colorStart: "#fff",
                colorStop: "#000",
                bubbleFunc:() => `hsla(120, 100%, 50%, .3)`,
                compose: "darker",
            });
        </script>
    </body>
</html>

今度は、背景が白いところでも丸は緑色になりました。

canvas要素のglobalCompositeOperation属性が使えるというのを見たのですが、設定してもうまく動かないものもあったり、違いが分からなかったりと・・・結局のところよくわかっていません。もう少し理解が進んだら、追記したいと思います。申し訳ありません。

最後に

公式ページにて、いくつかサンプルが公開されているので、それをベースにしつつ色などを少し変えるだけで、それっぽいものができると思います。

下記サイトも参考にしてみてください。

Bubbly demo
tipsy.github.io

コメント

タイトルとURLをコピーしました