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

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

sponsors

使用方法

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;
        }		
	

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors