指定したNode内の文字列を一文字ずつ<span>で囲んで差し替える。
$aniTextRdmFade()、$aniTextRise()、$aniTextLR()でも使用している。
半角スペースや   などの実体文字参照も一文字として処理される。
Node内の文字列を一文字ずつ<span>で囲んで差し替える。
Sass :
#sample1 > span {
&:nth-child(3n+1) { color: #8eb8bd } //ブルー
&:nth-child(3n+2) { color: #bdb88e } //ゴールド
&:nth-child(3n+3) { color: #bd8e9e } //レッド
}
Javascript :
var excNum=$charToSpan('sample1');
Node内の文字列を一文字ずつ<span>で囲んで差し替える。
Sass :
#sample2 > span {
&:nth-child(3n+1) { color: #8eb8bd } //ブルー
&:nth-child(3n+2) { color: #bdb88e } //ゴールド
&:nth-child(3n+3) { color: #bd8e9e } //レッド
}
Javascript :
var excNum=$charToSpan('sample2','br'); //改行指定「br」
var excNum=$charToSpan('sample2'); //改行指定は省略
Node内の文字列を一文字ずつ<span>で囲んで差し替える。改行指定は「flex」。
Sass :
#sample3 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
& > span {
&:nth-child(3n+1) { color: #8eb8bd } //ブルー
&:nth-child(3n+2) { color: #bdb88e } //ゴールド
&:nth-child(3n+3) { color: #bd8e9e } //レッド
}
}
Javascript :
var excNum=$charToSpan('sample3','flex');