アニメーション:

文字列を拡大→縮小するアニメーション

対象Node内の指定文字列を一文字ずつ飛び出すように拡大→縮小するアニメーション。
あるいは、応用して一文字ずつ動くアニメーションを適用可能。

String1
対象Nodeのid値を渡す Node渡しは不可
Number1
対象文字列の開始位置
Number2
対象文字列の文字数
Number3
各文字の変化のズレを指定 1以上の整数 ・ 0を渡すと全文字が同時に動く
Bool
変化状態(中間地点)で停止 true = 停止 ・ false = 続行 / 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)

記述例

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

注意点

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

指定の文字列を囲った <span> に対して、指定したタイミングで class="klibAniTextJumpoutDoing" を設定/削除するだけなので、拡大・縮小の動きは CSS の transition と transform を組み合わせて各Nodeに指定する必要がある。

基本は CSS 指定なので、同時に拡大時の color や filter などを指定して装飾することも可能。つまり、CSS の記述次第で拡大・縮小以外の動きを付加することも可能。(サンプル4・5を参照)

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

動作サンプル

【サンプルの条件設定】位置=7文字目から4文字 / 変化のズレ=4 / 変化属性=transform, color

指定文字列が拡大縮小する
HTML : <div id="sample1">指定文字列が拡大縮小する</div>
Sass : #sample1 { letter-spacing: 2px; & > span { transition: color 0.5s, transform 0.5s; &.klibAniTextJumpoutDoing { color: #de004c; transform: scale(1.5,1.5); } } }
Javascript : $aniTextJumpoutInit('sample1',6,4,4); //初期化 $aniTextJumpout('sample1'); //動かす

【サンプルの条件設定】位置=13文字目から17文字 / 変化のズレ=1 / 変化属性=transform, color

指定文字列が拡大縮小する
$aniTextJumpout()
HTML : <div id="sample2">指定文字列が拡大縮小する<br>$aniTextJumpout()</div>
Sass : #sample2 { text-align: center; letter-spacing: 2px; & > span { transition: color 0.5s, transform 0.5s; &.klibAniTextJumpoutDoing { color: #de004c; transform: scale(1.8,1.8); } } }
Javascript : $aniTextJumpoutInit('sample2',12,17,1); //初期化 $aniTextJumpout('sample2'); //動かす

【サンプルの条件設定】位置=1文字目から10文字 / 変化のズレ=0 / 変化属性=transform, color

文字列が拡大縮小する
HTML : <div id="sample3">文字列が拡大縮小する</div>
Sass : #sample3 { text-align: center; letter-spacing: 3px; & > span { transition: color 0.35s, transform 0.35s; &.klibAniTextJumpoutDoing { color: #de004c; transform: scale(1.2,1.2); } } }
Javascript : $aniTextJumpoutInit('sample3',0,10,0); //初期化 $aniTextJumpout('sample3'); //動かす

【サンプルの条件設定】位置=7文字目から7文字 / 変化のズレ=5 / 中間点で停止=true / 変化属性=opacity, transform, filter

指定文字列が
自由に移動する
HTML : <div id="sample4">指定文字列が<br>自由に移動する</div>
Sass : #sample4 { text-align: center; & > span { transition: opacity 0.5s, transform 0.5s, filter 0.5s; @for $n from 8 through 14 { &:nth-child(#{$n}) { color: #de004c; opacity: 0; transform: translate(100px,0) skew(-25deg,0); filter: blur(8px); } } &.klibAniTextJumpoutDoing { opacity: 1.0; transform: translate(0,0) skew(-25deg,0); filter: blur(0); } } }
Javascript : $aniTextJumpoutInit('sample4',6,7,5,true); //初期化 $aniTextJumpout('sample4'); //動かす

【サンプルの条件設定】位置=5文字目から6文字 / 変化のズレ=4 / 中間点で停止=true / 変化属性=opacity, transform, filter

文字列が回転しながら現れる
HTML : <div id="sample5">指定文字列が拡大縮小する</div>
Sass : #sample5 { & > span { transition: opacity 1s, transform 1s, filter 1s; @for $n from 5 through 10 { &:nth-child(#{$n}) { color: #31b1bc; opacity: 0; transform: rotate(360deg); filter: blur(10px) hue-rotate(-180deg); } } &.klibAniTextJumpoutDoing { opacity: 1.0; transform: rotate(0); filter: blur(0) hue-rotate(0); } } }
Javascript : $aniTextJumpoutInit('sample5',4,6,4,true); //初期化 $aniTextJumpout('sample5'); //動かす
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。