[JS]ベタ塗りのエレメントやページの背景に、繊細で美しいグラデーションを与えるスクリプト -Add Shine

ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。

サイトのキャプチャ

Add Shine
Add Shine -GitHub

Add Shineのデモ

スクリプトがオフの状態と、こんな感じでベタ塗りです。

サイトのキャプチャ

スクリプトオフ:ベタ塗り

スクリプトを適用すると、ページ全体でもボタンでも美しいグラデーションを適用します。

サイトのキャプチャ

グラデーションの適用

Add Shineの使い方

Add Shineの使い方は、簡単です。

Step 1: 外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
<script src="js/addShine.js"></script>

Step 2: HTML

HTMLはスクリプトを意識することなく、普通に実装します。

<body>
<button>ボタン</button>
</body>

Step 3: CSS

ページの背景とボタンは、ベタ塗りにします。

body{background:rgba(100,100,100,1);}
button{background:rgba(100,100,100,1);}

Step 4: JavaScript

jQueryのセレクタでbodyとbuttonを指定しスクリプトを実行すると、グラデーションが適用されます。

<script>
$(function() {
	$("body").addShine();
	$("button").addShine();
</script>

グラデーションは輝きの量を設定できます。
値は0-1の間で、デフォルトは0.2です。

<script>
$(function() {
	$("body").addShine(.2);//Default
	$("button").addShine(.5);
</script>

top of page

©2017 coliss