対象Node内の指定文字列を一文字ずつ飛び出すように拡大→縮小するアニメーション。
あるいは、応用して一文字ずつ動くアニメーションを適用可能。
初期化時に各文字を <span> で囲むので、対象Nodeは <span> 以外のブロックNodeにする必要がある。
指定の文字列を囲った <span> に対して、指定したタイミングで class="klibAniTextJumpoutDoing" を設定/削除するだけなので、拡大・縮小の動きは CSS の transition と transform を組み合わせて各Nodeに指定する必要がある。
基本は CSS 指定なので、同時に拡大時の color や filter などを指定して装飾することも可能。つまり、CSS の記述次第で拡大・縮小以外の動きを付加することも可能。(サンプル4・5を参照)
対象となる文字列内の半角スペースは Chrome では無視されてしまうので、     などを使用する。
【サンプルの条件設定】位置=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
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'); //動かす