ページのキャッチコピーの背景をどうしようかなと考えていた時に、ランダムで生成される四角形にしてみたらかわいいんじゃないかなと思ったので、作ってみました。モダンブラウザ用です。
サンプル
※表示を見たい場合は Result をクリック
四角形は可変なのでウインドウ幅を伸ばしたり、縮めたりすると動きがあります。
HTML
Walk on.
You have to learn to walk before you run.
四角形はli要素をJavaScriptで生成して、list_containerのul要素内に並べます。
CSS（抜粋）
// 外枠
#mosaic {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
// ul要素
#mosaic #list_container {
position: absolute;
width: 120%;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: stretch;
-moz-align-content: stretch;
-ms-align-content: stretch;
-o-align-content: stretch;
align-content: stretch;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
margin: auto;
padding: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
}
// li要素（四角形）
#mosaic #list_container li {
-webkit-flex: 0 0 100px;
-moz-flex: 0 0 100px;
-ms-flex: 0 0 100px;
-o-flex: 0 0 100px;
flex: 0 0 100px;
list-style: none;
height: 100px;
}
外枠の高さをli要素の3つ分を設定し、li要素の生成数が多くてはみ出るものはoverflow:hiddenで隠して見えないようにしています。
ul要素は、親要素のサイズピッタリにしてるとウインドウ幅を伸縮していると右端で段落ちが発生して四角形がなくなってしまいますので、幅を120%程度に広げておいて空白を防ぐようにしています。
JavaScript
//ランダムな数を生成する関数式
var randFnc = function(min, max) {
return Math.floor(Math.random() * max + 1 - min) + min;
};
//出力先の指定
var target = document.getElementById("list_container");
//ブロック生成
for (var i = 0; i < 200; i += 1) {
var li = document.createElement("li");
//ランダム色を生成 hslは色相, 明度, 彩度で指定する
li.style.backgroundColor = 'hsl(' + randFnc(20, 186) + ', 100%, 86%)';
//生成したリストを追加
target.appendChild(li);
}
//背景を動かす
setInterval(function(){
//はじめのli要素を変数に入れる
var changeItem = target.childNodes[1];
//要素の削除
target.removeChild(changeItem);
//要素の追加
target.appendChild(changeItem);
},400);
色は生成時に全自動で作成しています。RGB指定だと色の彩度や明度もバラバラになってしまうので、HSL指定で明度と彩度は固定して極力黒が強い色を出さないように調整して、あとは色相の好きな範囲をランダムな値で出るようにして表示することにしました。
ブロックの生成数は 画面幅 / 100px * 3列でフルHDでだいたい60個くらいあれば大丈夫ですが、高解像度が進んでいるので、200個くらいにしておきました。多めにしていても溢れないので大丈夫です。
背景を動かすは遊びで入れてみました。無くても可愛いですよ。