マーカーアニメーションをjQueryプラグイン化してみた

画面に表示されたときにマーカー（蛍光ペン）で線を引くようなアニメーションを付けるjQueryプラグインを作成しました。

動作例

 導入

ソースはGitHubで管理しています。

technote-space/jquery.marker-animation

Marker animation jQuery plugin. Contribute to technote-space/jquery.marker-animation development by creating an account on GitHub.

github.com

ダウンロードして利用する場合

リリースバージョンをダウンロードして適切な場所に保存し、

<script type="text/javascript" src="/assets/jquery.marker-animation.min.js"></script>

のように読み込みます。

npmから利用する場合

jquery.marker-animation

Marker animation jQuery plugin

www.npmjs.com

以下のコマンドでインストールします。

npm install --save jquery.marker-animation

利用方法

マーカーアニメーションを適用したい文字列を適当なclassやidのspanで囲います。

文章文章文章<span class="marker-animation">強調したい文字</span>文章文章文章文章

jQueryのセレクタで要素を指定し、「markerAnimation」関数を呼びます。

上の文章の例だと以下になります。

<script>
$('.marker-animation').markerAnimation();
</script>

オプション

「markerAnimation」関数を呼ぶ際にオプションを指定できます。

color

マーカーの色を指定

$('.marker-animation').markerAnimation({
    color: '#fe9'
});

thickness

マーカーの太さを指定

$('.marker-animation').markerAnimation({
    thickness: '.6em'
});

duration

マーカーを塗るのを完了するまでの時間を指定

$('.marker-animation').markerAnimation({
    duration: '2s'
});

font_weight

文字の太さを指定します。

$('.marker-animation').markerAnimation({
    font_weight: 'bold'
});

デフォルトは太字です。
太字にしない場合はnullを設定してください。

repeat

アニメーションを繰り返すかどうかを指定します。

$('.marker-animation').markerAnimation({
    repeat: false
});

trueにすると一度画面から外れて再び表示された際に再度アニメーションが実行されます。

個別オプションの指定

上のオプションの指定だと、マーカーアニメーションが適用される全ての要素で共通のオプションしか設定できません。

data-ma_「オプション名」=オプション値

のようにdataをもたせることで個別にオプションを指定することが可能です。

例１：色の変更

文章文章文章<span class="marker-animation" data-ma_color="red">強調したい文字</span>文章文章文章文章

この例ではマーカーの色が赤色になります。

例２：同時に複数設定

文章文章文章<span class="marker-animation" data-ma_repeat="true" data-ma_font_weight="null" data-ma_delay="2s">強調したい文字</span>文章文章文章文章

この例では

• 画面から外れるごとにアニメーションが実行
• 太文字ではない
• ２秒遅れてアニメーション開始

が設定されます。