背景に線を引いて印象的なサイトに!jQueryプラグイン「Lines.js」

時折背景に線を散らしているサイトがありますが、それをjQueryプラグインLines.jsを使って描くことが可能です。
これにより印象的な感じのサイトになるかもしません。
背景に線を引いて印象的なサイトに!jQueryプラグイン「Lines.js」サンプル

使用方法 Lines.jsからファイル一式をダウンロード。
<canvas id="id名"></canvas>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="lines.js"></script>
<script>
var canvas = $('#id名');
canvas.attr('height',$(window).height()); //ラインを引く高さをウィンドウサイズに
canvas.attr('width',$(window).width()); //ラインを引く幅をウィンドウサイズに
new lines({
pieces: 7, //ラインの本数
color: '#CBCBCB' //ラインの色
}).draw();
</script>

これで完成です。
仕上にCSSで余白を埋めたり、最背面にすればOKです。
#id名 {
position: absolute;
top: 0;
left: 0;
z-index: -20;
}

背景に線を引いて印象的なサイトに!jQueryプラグイン「Lines.js」サンプル

sponsors

「背景に線を引いて印象的なサイトに!jQueryプラグイン「Lines.js」」をシェアする

記事作成:
記事URL:

TOP > > > 背景に線を引いて印象的なサイトに!jQueryプラグイン「Lines.js」