マーカーアニメーションを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.

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

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

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

のように読み込みます。

npmから利用する場合

jquery.marker-animation
Marker animation jQuery plugin

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

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をもたせることで個別にオプションを指定することが可能です。

例1:色の変更

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

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

文章文章文章強調したい文字文章文章文章文章

例2:同時に複数設定

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

この例では

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

が設定されます。

文章文章文章強調したい文字文章文章文章文章

コメント