今日の人気記事

  1. キーボードレイアウトをWebサイトに表示「Keymap」
  2. 画像に拡大・縮小ボタンを「Zoomer」
  3. テーブルのヘッダー(th)がついてくる「Mr.StickyTableHeaders」

指定した要素をトレース「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

スポンサーリンク

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