アニメーション：
文字列を一文字ずつタイピング表示
対象Node内の文字列を一文字ずつタイピングするように表示していくアニメーション。
Node
Nodeを指定 id値を文字列で指定してもよい
Number
スピードを数値で渡す 1文字を表示するのにかかる秒数
Bool
タイピング前に高さを固定 true = 固定する ・ false = 固定しない ／ 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)
記述例
$aniTextTyping($id('aNode'), 0.15)
$aniTextTyping('aNode', 0.2, true)
注意点
対象NodeはCSSで「visibility: hidden」に設定しておく必要がある。動作開始時に自動的に「visibility: visible」になる。
結果が複数行になる場合には注意が必要。3番目サンプルのように、高さの固定を指定しても、指定Nodeが <span> などのインライン要素では無効となるので、ブロック要素で構成するか、CSSで「display: block」に設定しておく必要がある。
動作サンプル
【サンプルの条件設定】スピード＝0.15 ／ 高さを固定＝false
文字列をタイピングするように
HTML :
<div id="sample_text1">文字列をタイピングするように</div>
Javascript :
$aniTextTyping($id('sample_text1'),0.15);
【サンプルの条件設定】スピード＝0.1 ／ 高さを固定＝true
文字列をタイピングするように
中央合わせ
中央合わせ
HTML :
<div id="sample_text2">文字列をタイピングするように<br>中央合わせ</div>
Javascript :
$aniTextTyping($id('sample_text2'),0.1,true);
【サンプルの条件設定】スピード＝0.12 ／ 高さを固定＝true ※<span>なので高さ固定が効かない例
文字列を
タイピングするように
アニメーション
タイピングするように
アニメーション
HTML :
<span id="sample_text3">文字列を<br>タイピングするように<br>アニメーション</span>
Javascript :
$aniTextTyping('sample_text3',0.12,true);
【サンプルの条件設定】スピード＝0.09 ／ 高さを固定＝true ※「display: table」を利用して上下左右の中央に配置する例
文字列を
タイピングするように
アニメーション
タイピングするように
アニメーション
HTML :
<div id="sample4">
<div id="sample_text4">文字列を<br>タイピングするように<br>アニメーション</div>
</div>
Sass :
#sample4 {
display: table;
& > #sample_text4 {
visibility: hidden;
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
Javascript :
$aniTextTyping('sample_text4',0.09,true);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。