[JS]ココに注目！してほしい箇所をアニメーションでくるっと囲むスクリプト -traceit

サイト構築 -JavaScript

Post on:2014年6月6日

sponsorsr

テキストでも画像でもページ内のあらゆる要素をペンでくるっと囲んだようにトレースできるjQueryのプラグインを紹介します。

↓は上のタイトルのテキスト、各画像をくるっとアニメーションで囲んでいます。

traceit -GitHub

traceitのデモ
traceitの使い方

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'
    }
});