このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です。
アニメーションしながら現れるテキストを表示できるショートコードです。
INDEX
テキストだけを指定した表示例
このショートコード
[txtreveal ltext="DigiPress" rtext="Highly Flexible WordPress Theme"]
アニメーション回数を指定した表示例
このショートコード
[txtreveal loopnum=1 ltext="DigiPress" rtext="Highly Flexible WordPress Theme"]
エフェクトタイプを2、アニメーション時間を5.4秒にした表示例
このショートコード
[txtreveal ltext="DigiPress" rtext="Highly Flexible WordPress Theme" fx=2 time=5.4]
様々なパラメータを指定した表示例
このショートコード
[txtreveal loopnum=2 ltext="DigiPress" rtext="Highly Flexible WordPress Theme" lsize=42 lcolor="rgba(30,155,218,.7)" litalic=1 lbold=1 rsize=16 rcolor="#a0a0a0" fx=3 time=6.4 easing="cubic-bezier(0.43, 0.02, 0.17, 1.36)"]
指定可能なパラメータ
- ltext (※必須)
-
最初に左側に現れるテキストを指定します。
この項目は必須です。例 : ltext=’DigiPress’
- rtext (※必須)
-
最初のテキスト表示後、右側に現れる次のテキストを指定します。
この項目は必須です。例 : rtext=’Highly Flexible WordPress Theme’
- lsize
-
最初に現れる左側のテキストのフォントサイズを変更したい場合に、そのピクセル値を指定します。
未指定の場合は、「30ピクセル」のフォントサイズになります。例 : lsize=38px, lsize=42 など。
- lcolor
-
最初に現れる左側のテキストのフォントカラーカラーを、HEX、またはRGBAで指定できます。
例 : lcolor=”#FF7E8B”, lcolor=”rgba(169,163,235,0.8)” など
- lbold
-
最初に現れる左側のテキストを太字にする場合に、「true」または「1」を指定します。
例 : lbold=1, lbold=”true”
- litalic
-
最初に現れる左側のテキストをイタリック調(斜体)にする場合に、「true」または「1」を指定します。
例 : litalic=1, litalic=”true”
- rsize
-
最初のテキスト表示後、右側に現れる次のテキストのフォントサイズを変更したい場合に、そのピクセル値を指定します。
未指定の場合は、「30ピクセル」のフォントサイズになります。
例 : rsize=38px, rsize=42 など。
- rcolor
-
最初のテキスト表示後、右側に現れる次のテキストのフォントカラーカラーを、HEX、またはRGBAで指定できます。
例 : rcolor=”#FF7E8B”, rcolor=”rgba(169,163,235,0.8)” など
- rbold
-
最初のテキスト表示後、右側に現れる次のテキストを太字にする場合に、「true」または「1」を指定します。
例 : rbold=1, rbold=”true”
- ritalic
-
最初のテキスト表示後、右側に現れる次のテキストをイタリック調(斜体)にする場合に、「true」または「1」を指定します。
例 : ritalic=1, ritalic=”true”
- loopnum
-
フェードインアニメーションを繰り返す回数を指定する場合に数値を指定します。
未指定の場合は、アニメーションを無限に繰り返します。このパラメータで回数を指定した場合、最後の回数時のアニメーションでは、フェードアウトアニメーションは行われず、フェードインで表示されたままで終了します。
例 : loopnum=1
- fx
-
テキストを表示するアニメーションのパターンを3種類から指定します。
未指定の場合は、fx=1 が指定されます。未指定(fx=1)の場合左側のテキスト右側のテキストfx=2の場合左側のテキスト右側のテキストfx=3の場合左側のテキスト右側のテキスト - time
-
テキストを表示するアニメーションの時間を、秒数(半角数字のみ)で指定します。
未指定の場合は、「7.4秒」かけてアニメーションします。
例 : time=8, time=”7.2″
- easing
-
テキストを表示するアニメーションのイージングパターンを “ease”, “linear”, “ease-in”, “ease-out”, “ease-in-out”, またはcubic-bezier(x1, y1, x2, y2)のベジェ曲線で指定します。
未指定の場合は、”ease” が指定されます。
自作のベジェ曲線の値をイージングに指定する場合は、以下のサービスで作成できます。
例 : easing=”ease-in-out”, easing=”cubic-bezier(0.43, 0.02, 0.17, 1.36)” など。
- id
-
アニメーションテキスト要素を括るdiv要素に固有のIDを明示したい場合に、その値を指定します。
例 : id=”my-revealing-text”
- class
-
アニメーションテキスト要素を括るdiv要素に指定するclassがある場合にそのクラス名を指定します。
例 : class=”pd10px”
- style
-
アニメーションテキスト全体に追加する任意のCSSを直接記述できます。
例 : style=”margin-bottom:50px;”