【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。Tags【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。ONZEhttps://on-ze.com/archives/5889HomeBlog【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。スクリプト「Shards」の使い方です。GitHubで公開されているプラグイン本体をダウンロードしてきましょう。ZIP』を押すとファイルのダウンロードがはじまります。最初に「Shards」による背景を描画する要素を用意します。続けてjQuery本体[jquery.js]とダウンロードした[shards.js]を読み込みます。src="shards.js"></script></body>ここまでは簡単ですね。[Shards]の初期設定[Shards]の使い方。右側の値が初期値です。8つの引数を指定することで、様々なバリエーションの背景グラデーションを生成します。公式サイトで使われている設定を一例として紹介します。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>以下、実際に表示させてみたサンプルです。https://on-ze.com/demo/jquery-shards/TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】要素をタイル状に並べるプラグイン[Freetile.js]の使い方。【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。【jQuery】スマートフォンやタブレット端末でのスクロールを無効にする方法。