アニメーション:

文字列をベースラインから上にスライド

対象Node内の文字列が一文字ずつベースラインから上に向かって現れるアニメーション。

String
対象Nodeのid値を渡す Node渡しは不可
Number1
文字が現れる速度を指定 1以上の整数
Number2
各文字の変化のズレを指定 1以上の整数 ・ 0を渡すと全文字が同時に動く
●必須引数 ●オプション引数(省略可能)

記述例

$aniTextRiseInit('aNode', 5, 0)
$aniTextRise('aNode')
◆ 初期化してから、動かす
❶ $aniTextRiseInit(…) ※この関数で初期化して動かす準備
❷ $aniTextRise(id) ※初期化した時に指定したid値を渡して動かす

注意点

初期化時に各文字を <span> で囲むので、対象Nodeは <span> 以外のブロックNodeにする必要がある。

対象Nodeは CSS で「display: flex」とする。また、改行に対応させるには「flex-wrap: wrap」を指定する。

各文字の文字寄せ(左/中央/右)は、対象Nodeの CSS で justify-content を適宜指定する。同様に、各文字間隔は letter-spacing で調整する。

対象となる文字列内の半角スペースは Chrome では無視されてしまうので、&nbsp; を使用する。

動作サンプル

【サンプルの条件設定】速度=4 / 変化のズレ=0 / 中央合わせ

文字列がスライドする
HTML : <div id="sample1">文字列がスライドする</div>
Sass : #sample1 { display: flex; justify-content: center; }
Javascript : $aniTextRiseInit('sample1',4,0); //初期化 $aniTextRise('sample1'); //動かす

【サンプルの条件設定】速度=12 / 変化のズレ=3 / 右寄せ

文字列がスライドする
HTML : <div id="sample2">文字列がスライドする</div>
Sass : #sample2 { display: flex; justify-content: flex-end; letter-spacing: 5px; }
Javascript : $aniTextRiseInit('sample2',12,3); //初期化 $aniTextRise('sample2'); //動かす

【サンプルの条件設定】速度=18 / 変化のズレ=1 / 幅合わせ

$aniTextRize()
文字列がスライドする
HTML : <div id="sample3">$aniTextRize()<br>文字列がスライドする</div>
Sass : #sample3 { display: flex; justify-content: space-between; flex-wrap: wrap; }
Javascript : $aniTextRiseInit('sample3',18,1); //初期化 $aniTextRise('sample3'); //動かす
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。