今日の人気記事

  1. ボックスからはみ出たテキストをドットに変換「dotdotdot」
  2. 同じ内容の入力フォームを追加・削除「Repeater」
  3. 入力フォームのフォーカスを自動でタブ移動「Autotab」
  4. 3D球体のタグクラウドを実装 アニメ効果あり「Tag Cloud」
  5. アンカータグに確認やポップアップ効果を追加「A+」

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

スポンサーリンク

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