WordPressでマーカーアニメーション

WordPress

先日マーカー(蛍光ペン)で線を引くようなアニメーションをつけるjQueryプラグインを作成しました。

マーカーアニメーションをjQueryプラグイン化してみた
画面に表示されたときにマーカー(蛍光ペン)で線を引くようなアニメーションを付けるjQueryプラグインを作成しました。動作例 導入ソースはGitHubで管理しています。ダウンロードして利用する場合リリースバージョンをダウンロードして適切な場

表示されるとマーカーで線を引くようなアニメーションが開始されます。

一度画面から外れた後に再び表示されたときに再度アニメーションを行うようにもできます

マーカーの色も自由に設定できます。

マーカーの色も自由に設定できます。

文字を太くしないことも可能です。

ゆっくり塗ることもできますし、少し遅れてアニメーションを開始することもできます

リセット

せっかくなのでWordPressから簡単に使用できるようにプラグイン化しました。

Marker Animation
This plugin will add "Marker animation" function

導入方法

  1. プラグインの管理画面から新規追加
  2. 「蛍光ペン」で検索
  3. 「今すぐインストール」からインストール
  4. プラグインを有効化

デフォルト設定

管理画面の左メニュー「マーカーアニメーション」から設定を確認・変更することができます。

有効かどうか

チェックを外すと全てのマーカーアニメーションを止めることができます。

一時的に無効化したい場合に利用してください。

マーカーの色

マーカーの色を指定します。

マーカーの太さ

マーカーの太さを指定します。

塗る時間

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

0以上の数値+単位で指定します。

使用可能な単位は「s」と「ms」でそれぞれ秒とミリ秒です。

遅れ時間

表示されてからどれだけ時間が経過してからアニメーションを開始するかを指定します。

0、正の数、負の数+単位で指定します。

使用可能な単位は「塗る時間」と同様です。

数値に負の数を指定した場合の動作等はこちらを確認してください。

塗り方

マーカーの塗り方を設定します。

詳細はこちらを確認してください。

設定画面では「ease」「linear」「ease-in」「ease-out」「ease-in-out」が選択できます。

「cubic-bezier」等を指定したい場合は、詳細設定画面から設定します。

太文字にするかどうか

マーカーの対象を太文字にするかどうかを設定します。

繰り返すかどうか

画面から外れた後に再び表示された場合に再度アニメーションを行うかどうかを設定します。

マーカー位置の調整

マーカーの表示位置を下方向へ調整する値を設定します。

フォントによっては余計な空白があったりしてマーカーの位置がずれることがあります。

そういう場合にはこの値を調整してください。

マーカー設定(設定管理)

設定をひとまとめにして保存してエディタから呼び出す機能です。
空にした値はデフォルト設定が使用されます。

WordPress5.0以前のエディタ(クラシックエディタ)

コントロールの種類

マーカーアニメーションボタン

デフォルト設定で設定した値でマーカーが動作します。

マーカーアニメーション(詳細設定)ボタン

マーカーごとに細かく値を指定することができます。

マーカー設定で「クラシックエディタにボタン表示させるかどうか」を有効にして登録したボタン

マーカー設定で登録した値(空にした値はデフォルトの値)でマーカーが動作します。

マーカー設定で「クラシックエディタにスタイルメニューに表示させるかどうか」を有効にして登録したメニュー

マーカー設定で登録した値(空にした値はデフォルトの値)でマーカーが動作します。

WordPress5.0以降のエディタ

現在対応中です。

対応しました。

個別に設定を変更したい場合

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

のようなdata属性がある場合はそちらが優先されます。

マーカーの色を赤に変更

クラシックエディタの場合は「マーカーアニメーション(詳細設定)」ボタンから細かく設定可能です。

ウィジェットやタイトルなどで使用する

以下のように「marker-animation」クラスで囲むことで使用することが可能です。

<span class="marker-animation">WordPressでマーカーアニメーション</span>

ただし、エスケープ処理がされる場合があるので特にタイトルに設定する場合は注意が必要です。

特定の要素すべてに適用する

デフォルト設定を利用する方法

デフォルトの状態では以下のセレクタのみに適用されます。

.marker-animation

管理画面のマーカーアニメーションの詳細設定から、上記セレクタ以外に適用するセレクタを指定することが可能です。

複数指定する場合はカンマ区切りで指定します。

例:

.related-entry-card-title
.entry-title, .entry-card-title

マーカー設定を利用する方法

管理画面のマーカーアニメーションの設定管理から利用できるマーカー設定でも特定のセレクタに適用するための設定を追加できます。

適用したいセレクタを「セレクタ」に記入します。

エディタから利用する必要がない場合は「クラシックエディタにボタン表示させるかどうか」などのチェックを外します。

要望・バグ報告等

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

コメント

  1. kyk より:

    有効化すると、WPが全く表示されなくなります。
    友人の別環境でも同様でした。

  2. technote より:

    ご報告ありがとうございます。
    WordPress v5.0.0 未満で使用できない関数を使用していたため、v5.0.0 未満の場合にエラーが発生していました。
    WordPress v3.7.25 でも動作するように修正したので再度お試しください。
    よろしくお願いいたします。

  3. つかえのよぼろ より:

    スマートフォンでは作動しませんでした。

    どうしたら作動させられますか?

    • technote より:

      つかえのよぼろさんが管理しているであろうサイトを拝見いたしました。
      iPhone6sのSafari 及び 3, 4年前の機種のAndroid5.1.1のChrome から見ても問題なく動作していたのですが、確認した『スマートフォン』の機種とブラウザは何でしょうか?

      • ご回答いただき、ありがとうございます。
        私のサイトurlを記載するのを忘れていました。
        申し訳ありませんでした。
        https://kaze-yashiro.com/です。
        対象スマートフォンは、xperia x performanceです。android 8に、アップグレードしております。
        Google Chromeは最新にアップデートしております。
        よろしくお願いいたします。

      • ご回答、ありがとうございます。

        サイトurlの記載を忘れていました。申し訳ありません。

        スマートフォンは、Xperia X performance・Android 8.0です。

        ブラウザは、Google Cromeアプリケーション 72.0.3626.105です。

        よろしくおねがいします。

        • technote より:

          いくつかのエミュレータで確認したが自分のブログ含め他のサイトでも再現性なし
          また、提示されたサイトにてプラグインが使用されていないため確認不可
          投稿者の勘違いということで対応はしません。

  4. つかえのよぼろ より:

    クラシックテキストエディタにもボタンが欲しいのですが。

    • technote より:

      『クラシックテキストエディタ』は『クラシックエディタ』の『テキストモード』のことでしょうか?
      それであれば「AddQuicktag」などのプラグインを利用すれば対応できることなので、このプラグインとして対応する予定はありません。
      どうしてもという場合はGitHubのIssueに追加してください。
      もし他に欲しいという人が多数いた場合や手が空いた場合に対応する可能性があります。
      よろしくお願いいたします。