jQuery テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変える方法。文字列を一文字ごとにspanで囲む

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【jQuery テキストをタイピング風に一文字ずつ表示したり文字ごとに色を変える方法。文字列を一文字ごとにspanで囲む】です。タイピング風に一文字ずつ表示したり…文字ごとに色を変えたりといった動作はまれに使いたくなるのでメモしておきます。

文字列を一文字ずつ<span>で囲む

基本概念は至ってシンプルです。一文字ごとに<span>で挟んでいき、全て透過0%に設定。その後最初の<span>からだんだんとフェードアニメーションを掛けていきます。

共通HTML
<p class="tgt">abcdefgh…..</p>
CSS
.tgt {opacity: 0;}
.tgt span{opacity: 0;}
JS(一文字ずつ<span>で囲む)
$(‘.tgt’).children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, ‘<span>$1</span>’));
}
});

ここまでで文字列を一文字ずつ<span>で囲むことができました。あとは先頭の<span>から順番にフェードインさせます。

JS(一文字ずつ<span>で囲む + アニメーション)DEMO

$(window).bind(‘load’,function(){
// ここで文字を<span></span>で囲む
$(‘.tgt’).children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, ‘<span>$1</span>’));
}
});
// 一文字ずつフェードインさせる
$(‘.tgt’).css({‘opacity’:1});
for (var i = 0; i <= $(‘.tgt’).children().size(); i++) {
$(‘.tgt’).children(‘span:eq(‘+i+’)’).delay(50*i).animate({‘opacity’:1},50);
};
});

 

タイピング風 DEMO

まタイピング風にする為に文末に点滅するアンダーバー(_)を表示する方法もメモしておきます。

CSS
.tgt {opacity: 0;}
.tgt span{display: none; float: left;}
.tgt span.cur{display: block;}
JS

$(window).bind(‘load’,function(){
$(‘.tgt’).children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, ‘<span>$1</span>’));
}
});
$(‘.tgt’).append(‘<span class="cur">_</span>’);
setInterval(function(){$(‘.cur’).toggle();},200);
$(‘.tgt’).css({‘opacity’:1});
for (var i = 0; i <= $(‘.tgt’).children().size() – 1; i++) {
$(‘.tgt’).children(‘span:eq(‘+i+’)’).not(‘.cur’).delay(50*i).fadeIn(10);
};
});

 

一文字ごとに色を変える DEMO

一文字ごとに色を変えるには各文字に固有のクラスをつけていきます。ここでは【a】には【class=”c-a”】、【1】には【class=”c-1″】という様にクラスを変えてゆきます。変更点は【$(this).replaceWith(…,’***’)】の***部分のみです。

CSS(追加分)
span.c-a,
span.c-b,
span.c-c,
span.c-d{color:#007374;}
span.c-e,
span.c-f,
span.c-g,
span.c-h{color:#b21d2d}
JS

$(window).bind(‘load’,function(){
$(‘.tgt’).children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, ‘<span class="c-$1">$1</span>’));
}
});
$(‘.tgt’).css({‘opacity’:1});
for (var i = 0; i <= $(‘.tgt’).children().size(); i++) {
$(‘.tgt’).children(‘span:eq(‘+i+’)’).delay(50*i).animate({‘opacity’:1},50);
};
});

 

文字色をランダムに変える DEMO

次に文字色をランダムに変える方法です。正確には全てランダムではなく、5つの色をランダムに振り分ける方法です。

CSS(追加分)
span.c-1{color:#960018;}
span.c-2{color:#007374;}
span.c-3{color:#ace5ee;}
span.c-4{color:#3b444b;}
span.c-4{color:#19283c;}
JS
$(window).bind(‘load’,function(){
$(‘.tgt’).children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, ‘<span>$1</span>’));
}
});
$(‘.tgt’).children().each(function(){
var rand = Math.floor(Math.random()*5) + 1;
console.log(rand);
$(this).addClass(‘c-‘+rand);
});
$(‘.tgt’).css({‘opacity’:1});
for (var i = 0; i <= $(‘.tgt’).children().size(); i++) {
$(‘.tgt’).children(‘span:eq(‘+i+’)’).delay(50*i).animate({‘opacity’:1},50);
};
});

以上になります。

参照:テキストを1文字ずつclass付きのspanで囲う
  :LetteringJS Sederhana