アニメーション：
文字列をフェイドインで開く
対象Node内の文字列の letter-spacing を調整しながら、フェイドインして文字列を開く。
Node
Nodeを指定 id値を文字列で指定してもよい
Number1
開くスピードを数値で渡す 1以上の数値
Number2
推移前の字間を値で指定 0.0 – 1.0
Number3
推移後のletter-spacing値を指定 px想定で指定 ／ 省略した場合は 0 となる
●必須引数 ●オプション引数(省略可能)
記述例
$aniTextOpen($id('aNode'), 3, 0.0, 2)
$aniTextOpen('aNode', 1, 0.5)
注意点
対象Nodeの透明度はCSSで「opacity: 0」に設定しておくこと。
動作サンプル
【サンプルの条件設定】スピード＝3 ／ 推移前のletter-spacing＝0.3 ／ 推移後のletter-spacing＝10
SAMPLE BOX 1
HTML :
<div id="sample1">
<span>SAMPLE BOX 1</span>
</div>
Javascript :
$aniTextOpen($tag('span','sample1',0),3,0.3,10);
【サンプルの条件設定】スピード＝1 ／ 推移前のletter-spacing＝0.75 ／ 推移後のletter-spacing＝0 (省略)
SAMPLE BOX 2
HTML :
<div id="sample2">
<span>SAMPLE BOX 2</span>
</div>
Javascript :
$aniTextOpen($tag('span','sample2',0),1,0.75);
【サンプルの条件設定】スピード＝5 ／ 推移前のletter-spacing＝0.3 ／ 推移後のletter-spacing＝10
SAMPLE BOX 3
HTML :
<div id="sample3">
<span>SAMPLE BOX 3</span>
</div>
Javascript :
$aniTextOpen($tag('span','sample3',0),5,0.3,10);
【サンプルの条件設定】スピード＝6 ／ 推移前のletter-spacing＝0.3 ／ 推移後のletter-spacing＝30
SAMPLE BOX 4
HTML :
<div id="sample4">
<span>SAMPLE BOX 4</span>
</div>
Javascript :
$aniTextOpen($tag('span','sample4',0),6,0.3,30);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。