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

WordPress

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

マーカーアニメーションをjQueryプラグイン化してみた
画面に表示されたときにマーカー(蛍光ペン)で線を引くようなアニメーションを付けるjQueryプラグインを作成しました。動作例表示されるとマーカーで線を引くようなアニメーションが開始されます。一度画面から外れた後に再び表示されたときに再度アニ

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

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

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

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

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

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

リセット

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

導入方法

  1. プラグインの管理画面から新規追加
  2. 「marker animation」で検索
  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

コメント