[JS]ココに注目！してほしい箇所をアニメーションでくるっと囲むスクリプト -traceit
Post on:2014年6月6日
sponsors
テキストでも画像でもページ内のあらゆる要素をペンでくるっと囲んだようにトレースできるjQueryのプラグインを紹介します。
↓は上のタイトルのテキスト、各画像をくるっとアニメーションで囲んでいます。
traceitのデモ
デモページでは、さまざまなデモが楽しめます。
ネコの画像を囲むトリガーは、右のパネルです。
まずはtraceitのベーシックな動き、指定した要素全体をくるっと囲みます。
画像の一部をくるっと囲む時は、空のdiv要素を配置してそれを囲むように設定します。
traceitの使い方
Step 1: 外部ファイル
当スクリプトとjquery.jsを外部ファイルとして記述します。
<body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../js/raphael_traceit.min.js"></script> </body>
Step 2: HTML
HTMLはテキストでも画像でも通常通りの実装で構いませんが、要素を指定できるようidなどを与えておきます。
<div id="example">Let's trace this element.</div>
Step 3: JavaScript
トレースする要素を指定し、スクリプトを実行します。
//Initialize a trace instance with:
$('#example').trace();
ラインのデザインや形状を細かく設定することもできます。
矢印付きや点線、カラー変更は、こんな感じになります。
//$('#example31').trace({isVisible: false});
var inst = $('#example31').data('trace');
inst.reTrace({
'stroke': 'red',
'stroke-width': 2,
'stroke-opacity': 1,
'arrow-end': 'classic-wide-long',
'isVisible': 'true'
});
//or trigger 'adjust.trace' event
//$('#example32').trace({ isVisible: false });
$('#example32').trigger({
type: 'adjust.trace',
adjustments: {
'stroke': '#aa0000',
'stroke-width': 4,
'stroke-opacity': 1,
'stroke-dasharray' : '--..',
'gap-point': 'bottom_right'
}
});
sponsors
