Skip to content
WordPress plugin to add underline animation
PHP JavaScript CSS Other
Branch: master
Clone or download
technote-space Merge pull request #190 from technote-space/dependabot/npm_and_yarn/a…
…ssets/js/eslint-6.2.0

chore(deps-dev): bump eslint from 6.1.0 to 6.2.0 in /assets/js
Latest commit 4c9db06 Aug 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: update docs Jul 17, 2019
assets chore(deps-dev): bump eslint from 6.1.0 to 6.2.0 in /assets/js Aug 19, 2019
bin feat: gh pages Jul 16, 2019
configs feat: #177 #178 Jul 16, 2019
languages feat: add stripe preset (#171) Jul 3, 2019
src feat: update packages, use yarn Jul 10, 2019
tests fix: phpmd, phpcs Aug 6, 2019
.editorconfig introducing tests Jul 1, 2019
.gitattributes chore: trivial changes Jul 16, 2019
.gitignore chore: trivial changes Jul 16, 2019
.htaccess first commit Nov 30, 2018
.travis.yml feat: gh pages Jul 16, 2019
LICENSE first commit Nov 30, 2018
README.md chore: trivial changes Jul 16, 2019
composer.json chore: remove script Aug 6, 2019
index.php first commit Nov 30, 2018
marker-animation.php v2.1.4 Aug 6, 2019
readme.txt v2.1.4 Aug 6, 2019
update.json v2.1.4 Aug 6, 2019

README.md

Marker Animation

Build Status Coverage Status CodeFactor License: GPL v2+ PHP: >=5.6 WordPress: >=4.6

バナー

蛍光ペンで塗るようなアニメーションを表示する機能を追加するプラグインです。

デモ

最新バージョン

スクリーンショット

動作

動作

デフォルト設定画面

設定画面

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

一覧画面

設定画面

投稿編集画面

アニメーションON

アニメーションOFF

要件

  • PHP 5.6 以上
  • WordPress 4.6 以上

導入手順

  1. 最新版をGitHubからダウンロード
    marker-animation.zip
  2. 「プラグインのアップロード」からインストール install
  3. プラグインを有効化

使用方法

  1. 投稿画面のエディタでアニメーションを追加したい文章をマウスで選択
  2. マーカーペンアイコンを押下
  3. アニメーションを外したい場合は対象の文にカーソルを合わせた状態でマーカーペンアイコンを押下

コントロールの種類

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

デフォルト設定画面で設定した値でマーカーが動作します。
ボタン1

サイドバーで細かく値を指定できます。 (WordPress v5.2以上)
詳細設定

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

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

設定

有効かどうか

マーカーアニメーションが有効かどうかを設定します。
これを外すと全てのアニメーションが動作しなくなります。

マーカーの色

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

マーカーの太さ

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

塗る時間

マーカーを塗り終えるまでにかかる時間を設定します。
0以上の数値+単位で指定します。
使用可能な単位は「s」と「ms」でそれぞれ秒とミリ秒です。

遅れ時間

表示されてからどれだけ時間が経過してからアニメーションを開始するかを指定します。 0、正の数、負の数+単位で指定します。
使用可能な単位は「塗る時間」と同様です。
数値に負の数を指定した場合の動作等はこちらを確認してください。

塗り方

マーカーの塗り方を設定します。
詳細はこちらを確認してください。
設定画面では「ease」「linear」「ease-in」「ease-out」「ease-in-out」が選択できます。
「cubic-bezier」等を指定したい場合は、詳細設定画面から設定します。

太文字にするかどうか

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

ストライプデザインかどうか

ストライプデザインにするかどうかを設定します。

ストライプデザイン

これが設定されている場合、アニメーションなしの動作になります。

繰り返すかどうか

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

マーカー位置の調整

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

アニメーションなしでの利用

塗る時間と遅れ時間を0に設定するとアニメーションなしでの利用が可能です。

Dependency

Author

GitHub (Technote)
Blog

プラグイン作成用フレームワーク

WP Content Framework

You can’t perform that action at this time.