複数のパターンのグラデーションがレイヤー状に重なる背景を描画できる jQuery スクリプト「Shards」の使い方です。

まずはGitHubで公開されているプラグイン本体をダウンロードしてきましょう。

https://github.com/vonKristoff/Shards

ページの右上あたりにある緑色のボタン『Clone or Download』をクリック後、ポップアップしたボックスの中の『Download ZIP』を押すとファイルのダウンロードがはじまります。

HTMLの記述

最初に「Shards」による背景を描画する要素を用意します。

<body>
...
<div id="bg"></div>
</body>

ここでは仮に id="bg" と名付けました。

さらに続けてjQuery本体［jquery.js］とダウンロードした［shards.js］を読み込みます。

<body>
...
<div id="bg"></div>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="shards.js"></script>
</body>

ここまでは簡単ですね。

［Shards］の初期設定

［Shards］の使い方。
基本の書式は以下。右側の値が初期値です。

$('element').shards(
	colour_1 : RGBA配列 -> [255,255,55,.5],
	colour_2 : RGBA配列 -> [255,255,55,.5],
	shade_colour : RGBA配列 -> [255,255,55,.5],
	number_of_shards : 整数 -> 12 max:100,
	complexity : 10進数 -> .8 max:1,
	lightness : 整数 -> 2 max:3,
	alpha_constant : 10進数 -> .8 max:1,
	fullscreen : 真偽値 -> true
);

.shards(); で８つの引数を指定することで、様々なバリエーションの背景グラデーションを生成します。

設定例

公式サイトで使われている設定を一例として紹介します。

<body>
...
<div id="bg"></div>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="shards.js"></script>
<script>
$(function(){
$('#bg').shards(
	[10,35,180,.15],
	[255,20,220,.25],
	[0,0,0,.25],
	20,
	.58,
	2,
	.15,
	true
);
});
</script>
</body>

以下、実際に表示させてみたサンプルです。

jQuery Shards : https://on-ze.com/demo/jquery-shards/