アニメーション：
文字列を文字ごとに左右からスライドイン
対象Node内の文字列が一文字ずつ左または右から現れるアニメーション。
String1
対象Nodeのid値を渡す Node渡しは不可
Number1
文字が現れる速度を指定 1–100 ／ 指定した数値は1コマごとの文字幅に対する%となる
Number2
各文字の変化のズレを指定 1以上の整数 ・ 0を渡すと全文字が同時に動く
String2
動作の方向を指定 L = 左から ・ R = 右から ／ 大文字・小文字で指定可能
●必須引数 ●オプション引数(省略可能)
記述例
$aniTextLRInit('aNode', 10, 0, 'L')
$aniTextLR('aNode')
◆ 初期化してから、動かす
❶ $aniTextLRInit(…) ※この関数で初期化して動かす準備
❷ $aniTextLR(id) ※初期化した時に指定したid値を渡して動かす
❶ $aniTextLRInit(…) ※この関数で初期化して動かす準備
❷ $aniTextLR(id) ※初期化した時に指定したid値を渡して動かす
注意点
初期化時に各文字を <span> で囲むので、対象Nodeは <span> 以外のブロックNodeにする必要がある。
対象NodeはCSSで「display: flex」とする。また、改行に対応させるには「flex-wrap: wrap」を指定する。
各文字の文字寄せ(左／中央／右)は、対象Nodeの CSS で justify-content を適宜指定する。同様に、各文字間隔は letter-spacing で調整する。
対象となる文字列内の半角スペースは Chrome では無視されてしまうので、 を使用する。
動作サンプル
【サンプルの条件設定】速度＝10 ／ 変化のズレ＝0 ／ 動作の方向＝右から ／ 中央合わせ
文字列がスライドする
HTML :
<div id="sample1">文字列がスライドする</div>
Sass :
#sample1 {
display: flex;
justify-content: center;
letter-spacing: 4px;
}
Javascript :
$aniTextLRInit('sample1',10,0,'R'); //初期化
$aniTextLR('sample1'); //動かす
【サンプルの条件設定】速度＝20 ／ 変化のズレ＝3 ／ 動作の方向＝左から ／ 右寄せ
文字列がスライドする
HTML :
<div id="sample2">文字列がスライドする</div>
Sass :
#sample2 {
display: flex;
justify-content: flex-end;
letter-spacing: 3px;
}
Javascript :
$aniTextLRInit('sample2',20,3,'L'); //初期化
$aniTextLR('sample2'); //動かす
【サンプルの条件設定】速度＝14 ／ 変化のズレ＝1 ／ 動作の方向＝右から ／ 幅合わせ
$aniTextRize()
文字列がスライドする
文字列がスライドする
HTML :
<div id="sample3">$aniTextRize()<br>文字列がスライドする</div>
Sass :
#sample3 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
Javascript :
$aniTextLRInit('sample3',14,1,'r'); //初期化
$aniTextLR('sample3'); //動かす
【サンプルの条件設定】速度＝15 ／ 変化のズレ＝7 ／ 動作の方向＝左から ／「flex-direction: column」を適用した例
12345
HTML :
<div id="sample4">12345</div>
Sass :
#sample4 {
display: flex;
flex-direction: column;
width: fit-content;
}
Javascript :
$aniTextLRInit('sample4',15,7,'L'); //初期化
$aniTextLR('sample4'); //動かす
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。