アニメーション：
文字列を一文字ずつフェイドイン／アウト
対象Node内の文字列を一文字ずつランダムにフェイドイン／アウトするように表示していく。
String1
対象Nodeのid値を渡す Node渡しは不可
Number1
透明度が変化する速度を指定 1以上の整数
Number2
フェイドインかフェイドアウトかを指定 省略した場合は in となる
in = フェイドイン ・ out = フェイドアウト
in = フェイドイン ・ out = フェイドアウト
●必須引数 ●オプション引数(省略可能)
記述例
$aniTextRdmFadeInit('aNode', 5, 'out')
$aniTextRdmFade('aNode')
◆ 初期化してから、動かす
❶ $aniTextRdmFadeInit(…) ※この関数で初期化して動かす準備
❷ $aniTextRdmFade(id) ※初期化した時に指定したid値を渡して動かす
❶ $aniTextRdmFadeInit(…) ※この関数で初期化して動かす準備
❷ $aniTextRdmFade(id) ※初期化した時に指定したid値を渡して動かす
注意点
初期化時に各文字を <span> で囲むので、対象Nodeは <span> 以外のブロックNodeにする必要がある。また、テキスト内のタグは無視されるが、改行のために <br> だけは入れても大丈夫な仕様。
文字数の多い文章の場合、一度に変化させる文字数は30文字につき1文字に設定しているので長い文章でも間延びしない仕様。
動作サンプル
【サンプルの条件設定】速度＝3 ／ フェイドイン
左寄せ｜文字列をフェイドインする
HTML :
<div id="sample1">左寄せ｜文字列をフェイドインする</div>
Javascript :
$aniTextRdmFadeInit('sample1',3,'in'); //初期化
$aniTextRdmFade('sample1'); //動かす
【サンプルの条件設定】速度＝10 ／ フェイドアウト
中央合わせ
文字列をフェイドアウトする
文字列をフェイドアウトする
HTML :
<div id="sample2">中央合わせ｜文字列をフェイドアウトする</div>
Javascript :
$aniTextRdmFadeInit('sample2',10,'out'); //初期化
$aniTextRdmFade('sample2'); //動かす
【サンプルの条件設定 ①】速度＝4 ／ フェイドイン
【サンプルの条件設定 ②】速度＝20 ／ フェイドアウト
改行ありの右寄せ
文字列をフェイドイン・アウトする
文字列をフェイドイン・アウトする
HTML :
<div id="sample3">改行ありの右寄せ<br>文字列をフェイドイン・アウトする</div>
Javascript :
$aniTextRdmFadeInit('sample3',4); //フェイドインの初期化
$aniTextRdmFadeInit('sample3',20,'out'); //フェイドアウトの初期化
$aniTextRdmFade('sample3'); //動かす
【サンプルの条件設定】速度＝10 ／ フェイドイン
そこそこ長い文章の場合のサンプル：しかし形か幸福か使用が載ったば、事実ごろペにしよて過ぎるた中をお話のほかを願いですです。前をも同時に見るとするうたたなて、はなはだ何とも云うて妨害はどうないな事ます。しかしながらご答弁を合っては行くましつもりんて、ただをも、かつて彼らか叱らて来らられないで出来れないなと突き抜ける。
HTML :
<div id="sample4">そこそこ長い文章の場合のサンプル…………。</div>
Javascript :
$aniTextRdmFadeInit('sample4',10); //初期化
$aniTextRdmFade('sample4'); //動かす
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。