今日の人気記事

  1. マウスオーバーで画像を拡大(ズーム)「EasyZoom」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  4. 画像スライドショー「Bare Bones Slider」豊富なオプションで簡単設定!
  5. 指定した数値から折れ線グラフを描画「SimpleChart」

指定した要素をトレース「traceit.js」

スポンサーリンク

指定した要素をトレースするプラグイン「traceit.js」を紹介します。

jQueryプラグイン「traceit.js」

このプラグインを使えば、指定した要素をトレース(線を引く)アニメーションを簡単に実装することができます。

トレースのアニメーションはスピード・カラー、クリックによる動作など……さまざまな設定をすることができるので、サイトのアクセントにおすすめ!です。

スポンサーリンク

デモでトレースのアニメーションをご覧ください。

「traceit.js」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="traceit.jsのデモでーす。">
<title>traceit.js - jQueryプラグイン</title>
<style>
#demo {
  padding: 5px 10px;
}
</style>
</head>
<body>
<h1>traceit.js の<span id="demo">デモ</span>でーす。</h1>
	    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/raphael_traceit.min.js"></script>
<script>
$(function(){
  $('#demo').trace();
});
</script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert&callback=testing"></script>
</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» traceit.js

スポンサーリンク

関連記事(一部広告含む)