対象Node内の文字列が一文字ずつベースラインから上に向かって現れるアニメーション。
初期化時に各文字を <span> で囲むので、対象Nodeは <span> 以外のブロックNodeにする必要がある。
対象Nodeは CSS で「display: flex」とする。また、改行に対応させるには「flex-wrap: wrap」を指定する。
各文字の文字寄せ(左/中央/右)は、対象Nodeの CSS で justify-content を適宜指定する。同様に、各文字間隔は letter-spacing で調整する。
対象となる文字列内の半角スペースは Chrome では無視されてしまうので、 を使用する。
【サンプルの条件設定】速度=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 / 幅合わせ
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'); //動かす