自由自在にグラデーションを付けるjavascript「jQuery gradient」

背景などにグラデーションを使う際に、画像を一切使用しないjavascript「gradient」を以前紹介しました。
しかし要素のサイズを大きくすると表示が極度に遅くなるのが問題でした。
jQuery gradientは実用に堪えうる表示速度を達成しています。
jGradient2

使用方法
jQuery gradientからjquery.gradient.jsを、jQueryからjquery.jsとjquery.dimensions.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.dimensions.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.gradient.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('要素名').gradient();
});
</script>

最後にHTMLで上記で指定した要素名を使用すれば完成です。
またオプションを使用すると色や方向、長さなどを設定できます。
$('要素名').gradient({
from: 'ff5500', //始まりの色(HEX指定)
to: 'ffffff', //終わりの色(HEX指定)
direction: 'vertical', //グラデーション方向(垂直:vertical、水平:horizontal)
length: 75, //グラデーションの距離
position: 'right' //グラデーションの位置
});

自由自在にグラデーションを付けるjavascript「jQuery gradient」サンプル

sponsors

「自由自在にグラデーションを付けるjavascript「jQuery gradient」」をシェアする

記事作成:
記事URL:

TOP > > > 自由自在にグラデーションを付けるjavascript「jQuery gradient」