多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」をご紹介します。ページをリロードする度にランダムで形が変化するのも面白いですね。カラーや破片の数などはオプションで設定していきます。お洒落でインパクトある背景を手軽に実装したい時に活躍できますね。
[ads_center]
使い方
こんな感じで綺麗なグラデーションが重なり合う背景を実装できます。
使い方はとてもシンプルです。オプションにrgba値や破片の数を指定していくだけです。
$('.bg').shards([0,0,0,.5],[255,0,0,.2],[255,255,0,.1],10,2,2,.1,true);
各項目は以下のようになっています。
$('element').shards( colour_1, colour_2, shade_colour, number_of_shards, complexity, lightness, alpha_constant, fullscreen );
CSSで描画されているので、オプションを弄るだけで気軽に変更できるのがいいですね。