Top

JavaScriptを使って背景にカラフルな円をランダムに浮かべる

背景にカラフルで半透明な円をたくさん浮かべてみます

位置と色をランダムにしているので更新やページ移動をするたびに背景の雰囲気が変わります。背景に色があるので記事本文が若干読みにくいです。すみません。

balloon

作り方

各バルーンの色を HSL カラーで選択することで綺麗めな色だけを選定しています。位置の指定は fixed にしていますが、上手くやれば body 全体にも出来そうです。

背景全体に canvas を貼ってという感じでも出来そうですが、古典的に div をたくさん生成して作ってみます。

JavaScript

//colorfulBalloon 関数として宣言
function colorfulBalloon(n, max, min) {
    var balloon = document.createElement("div");
    balloon.className = "balloon";
    balloon.style.borderRadius = "50%";
    balloon.style.position = "fixed";
    balloon.style.zIndex = "-1";

    for (var i = 0; i < n; i++) {
        var balloonClone = balloon.cloneNode();

        //HSLA 色で色を決定
        balloonClone.style.backgroundColor = "hsla(" + Math.random() * 360 + ", 50%, 50%, .2)";

        //最大値、最小値を考慮したバルーンサイズにする
        var size = Math.random() * (max - min) + min;

        //位置をランダムに
        balloonClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
        balloonClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)";
        balloonClone.style.width = size + "px";
        balloonClone.style.height = size + "px";
        document.body.appendChild(balloonClone);
    };

}

//バルーンの個数を10個、バルーンの最大値550px、最小値50px
colorfulBalloon(10, 550, 50);

使い方は簡単で最初の引数はバルーンの個数、2個目の引数はバルーンのサイズの最大値で、3個目が最小値です。

バルーンの数を増やして30個、サイズの最大値を大きく800px、最小値を小さくして10pxにしたければ、

colorfulBalloon(30, 800, 10)

としてあげれば個数、サイズともに変動させることが出来ます。個数、サイズを画面のサイズに合わせて動的に変えればスマホなどどんな画面で見てもそれなりに見えるようにも出来るかもしれません。

この記事では colorfulBalloon(10, 550, 50) で表示しているので、モバイルで見ると少しサイズが大きいかもしれないです。

まとめ

位置決定が完全にランダムなので全体で右に寄ってしまったり左に寄ってしまったりが起きます。乱数の取り方で上手に分散できないか調べてみましたが少し厳しそうです。また、背景に画像を設定している場合は重なりの関係で円が表示されないかもしれません。

各バルーンに balloon というクラス名が付いてますので、アニメーションさせたいなどあれば .balloon に対してしてあげてください。ただランダムで位置を時間変化してあげるのは15個程度のバルーンでも結構重たかったので、この辺はもう少し考えてもよさそうです。