[JS]ベタ塗りのエレメントやページの背景に、繊細で美しいグラデーションを与えるスクリプト -Add Shine
Post on:2012年12月19日
sponsors
ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。
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>
sponsors
