RandomBalls.js

ver. 1.0.0

ランダムなサイズ・透明度の円がふわふわと動くJavaScriptです。クリックするとボールが増えます。
プラグインではなく、直接JSファイルを編集するだけの単純なものです。

基本の使い方

STEP1

HTMLファイルに<canvas>タグを記述し、好きなID名をつけます。

例：

<canvas id="randomBalls"></canvas>

STEP2

distフォルダの中にあるJSファイルを</body>閉じタグ直前で読み込みます。

例：

<script src="randomballs-settings.js"></script>
<script src="randomballs.min.js"></script>

STEP3

distフォルダの中にあるrandomballs-settings.jsファイルを開き、11行目をSTEP1でつけたID名に書き換えます。

例：

var randomBalls_canvasID = 'randomBalls'; //<canvas>のIDを''内に記入

高度な設定

distフォルダの中にあるrandomballs-settings.jsファイルを書き換えることでさまざな設定をすることができます。

`<canvas>`の背景色

var randomBalls_canvasColor = 'rgba(255, 127, 80, 0.8)';

<canvas>の背景色を好きな色に変更することができます。
RGBa指定だけでなく、CSSで使用できる色の指定であればいずれも使用可能です。
transparentとかけば透明になります。

`<canvas>`のサイズ

var randomBalls_canvasSize = false;

<canvas>のサイズを設定することができます。
trueまたはfalseで指定します。
trueの時は、<canvas>の親要素のサイズと同じになります。
falseの時は、ブラウザの表示画面いっぱいに広がります。

ボールの動く速度

var randomBalls_ballsSpeed = 1;

数値を入力することで、ボールの動く速度を変更することができます。
数字が小さいとゆるやかに動き、大きいと速く動きます。

ボールの最大半径

var randomBalls_ballsSize = 23;

数値を入力することで、ランダムに生成されるボールの大きさの、最大半径を変更することができます。

初期ボールの個数

var randomBalls_initialBalls = 20;

ページ読み込み時に最初に生成されるボールの個数を変更することができます。

初期ボールの色

var randomBalls_initialBallsColor = [255, 255, 255]; //ボールの色（RGB）

ページ読み込み時に最初に生成されるボールの色を変更することができます。
[]内に、RGBカラーのR、G、Bの数値をそれぞれ入力します。
RGB以外の指定はできません。

初期ボールの透明度

var randomBalls_initialBallsOpacity = 4;

ページ読み込み時に最初にランダムに生成されるボールの透明度を変更することができます。
1-9の数値を入力することができます。

追加ボールの最大個数

var randomBalls_extraBallsMax = 10;

<canvas>の領域をクリックするとボールを増やすことができます。
数値を入力することで増やせる最大個数を変更することができます。

追加ボールの色

var randomBalls_extraBallsColor = 'rgba(255,255,0,0.15)';

クリックして増やせるボールの色を変更することができます。
RGBa指定だけでなく、CSSで使用できる色の指定であればいずれも使用可能です。

対応ブラウザ

2020年4月23日時点で、以下のブラウザでの動作を確認しています。
Chrome, Safari, Firefox Developer Edition

Gita-mw/randomballs