DigiPress

Highly Flexible WordPress Theme

メニュー

txtreveal : 様々なアニメーションでテキストをフェードイン表示

txtreveal : 様々なアニメーションでテキストをフェードイン表示

このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です。

アニメーションしながら現れるテキストを表示できるショートコードです。

テキストだけを指定した表示例

DigiPress
Highly Flexible WordPress Theme

このショートコード

[txtreveal ltext="DigiPress" rtext="Highly Flexible WordPress Theme"]

アニメーション回数を指定した表示例

DigiPress
Highly Flexible WordPress Theme

このショートコード

[txtreveal loopnum=1 ltext="DigiPress" rtext="Highly Flexible WordPress Theme"]

エフェクトタイプを2、アニメーション時間を5.4秒にした表示例

DigiPress
Highly Flexible WordPress Theme

このショートコード

[txtreveal ltext="DigiPress" rtext="Highly Flexible WordPress Theme" fx=2 time=5.4]

様々なパラメータを指定した表示例

DigiPress
Highly Flexible WordPress Theme

このショートコード

[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;”