thumbnail

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

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

動作例


動作デモはこちら

 導入


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


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


リリースバージョンをダウンロードして適切な場所に保存し、
<script type="text/javascript" src="/assets/jquery.marker-animation.min.js"></script>

のように読み込みます。

npmから利用する場合




以下のコマンドでインストールします。
npm install --save jquery.marker-animation

利用方法


マーカーアニメーションを適用したい文字列を適当なclassやidのspanで囲います。
文章文章文章<span class="double-underline">強調したい文字</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="double-underline" data-ma_color="red">強調したい文字</span>文章文章文章文章

この例ではマーカーの色が赤色になります。
文章文章文章強調したい文字文章文章文章文章

例2:同時に複数設定


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

この例では

  • 画面から外れるごとにアニメーションが実行

  • 太文字ではない

  • 2秒遅れてアニメーション開始


が設定されます。
文章文章文章強調したい文字文章文章文章文章

prev articleprev thumbnail
jQueryプラグインを作成する(npmパッケージ化)
WordPressのアクションやフィルタの適用を最小限にする
next thumbnailnext article
arrow