てきとうな説明でてきとうに作ろう

概要

公式
背景がきれい！
背景をなんか多層に重なり合うグラデーションできれいなものにしてくれます。毎回ランダムです。
サイトの背景に困ったら使ってみましょう。

サンプルではランダムに設定した値で各ページを彩ってみました。
テキストボックス内の「shards(～」はそこの設定値をそのまま出力しています。
気に入ったものがあったらコピーして使ってください。
Section1のcustomでは設定値を自由に変えることができるようにしたので、こちらも確認などしたいときに使ってください。

なお、customのカラーピッカーはRGBA Color Pickerを使用しています。

2019.07

やりかた

公式サイトの右上にGitHubのリンクがあるので、そこへいってShards-master.zipを手に入れ、解凍しましょう。

「shards.js」を自サイトの場所へコピーします。

以下のようにしてshardを使います。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="ファイルの場所/shards.js"></script>
<script type="text/javascript">
    $(function(){
        $('#bg').shards(
            [255,255,55,.5],
            [255,255,55,.5],
            [255,255,55,.5],
            12,
            .8,
            2,
            .8,
            true
        );
    });
</script>
<style type="text/css">
</head>
<body>
<div id="bg"></div>
</body>

21行目のように、shardを効かせたい要素に「id="bg"」とします。
7～14行目がオプション設定部分で、色等を設定します。
サンプルのカスタムをいじると設定値を出力してくれるので、この部分にそれを差し替えてください。
正直日本語でなんていえばいいのかはっきりできないのですが、適当に説明するとこんな感じです。

行数	オプション名	適当な説明	設定値
7	colour 1	配色1。基準とする色。	[0,0,0,0.0]～[255,255,255,1.0] RGBカラーにalpha（透明度）の配列
8	colour 2	配色2。基準とする色。	[0,0,0,0.0]～[255,255,255,1.0] RGBカラーにalpha（透明度）の配列
9	shade colour	色合いって翻訳が言ってた	[0,0,0,0.0]～[255,255,255,1.0] RGBカラーにalpha（透明度）の配列
10	number of shards	shardsの回数	0～100の整数
11	comlexity	複雑さ（翻訳）	0.0～1.0の小数
12	lightness	明るさ。数が大きいほど明るくなる。	0～3の整数
13	alpha	透明度。数が小さいほど透明になる。	0.0～1.0の小数
14	fullscreen	フルスクリーンにするかどうか。 shardさせた要素にサイズを設定していても、ここがtrueの時はshardは全画面に映る。	trueかfalse