びよよ~んと線を震わせるJavaScriptライブラリ「underlineJS」

どこで使うか悩むところではありますが、線をびよよ~んと心地良く震わせることができます。
underline.js -- A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underlineです。

sponsors

使用方法

underline.jsからファイルをダウンロード。

  <style>
canvas {
	background-color: #fff;  
	margin: auto;
	display: block;
	width: 100%;
	height: 300px;
}
  </style>
    <script src="http://davidbau.com/encode/seedrandom-min.js"></script>
  <script type="text/javascript" src="three.min.js"></script>
  <script type="text/javascript" src="class.js"></script>
  	
上記を記述したら表示させたい場所にcanvasを書きます。

    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="main.js"></script>
  	
main.jsにある以下の指定で色などを調整できます。

var myString = new String('myCanvas', new Point(300, 100.5), new Point(600, 100.5), 3, "#bad424");
point(x位置、y位置),太さpx、色といった感じです。
使い勝手や用途含めて、まだまだこれからに期待という感じかもしれません。

サンプル


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

sponsors