小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryでテキストをタイピング風に一文字ずつ表示

  • 公開日：2020-01-22
  • 最終更新日：2020-02-24

キャッチコピーなどを効果的に見せたいときに使用したタイピング風に一文字づつ文字を表示される方法をメモ。
複数行にも対応しているので文字の大きさも自由に変更できる。

HTML

<p><small class="typ_first">jQueryでテキストを</small><span class="typ_second">タイピング風に一文字ずつ表示</span></p>

CSS

p {
	font-size: 6rem;
}
p small {
	font-size: 2.8rem;
	display: block;
	margin: 0 0 10px;
}
.typ_first,
.typ_second {
	opacity: 0;
}
.typ_first span,
.typ_second span {
	opacity: 0;
}

jQuery

var speed = 75; //表示速度
//文字変換
var typ_first = $('.typ_first').text().split('');
var textbox01 = '';
$.each(typ_first, function(){
	textbox01 += '<span>'+this+'</span>'
});
$('.typ_first').html(textbox01);
$('.typ_first').css({'opacity':1});
var typ_second = $('.typ_second').text().split('');
var textbox02 = '';
$.each(typ_second, function(){
	textbox02 += '<span>'+this+'</span>'
});
$('.typ_second').html(textbox02);
$('.typ_second').css({'opacity':1});

//タイピング処理
function typing(name){
	for (var i = 0; i <= $(name).children().size(); i++) {
		$(name).children('span:eq('+i+')').delay(speed*i).animate({'opacity':1}, speed);
	};
}

//非同期処理部分
function func(){
	var d = new $.Deferred;
	typing('.typ_first');
	setTimeout(function(){
		d.resolve();
	}, speed*$('.typ_first').children().size());
	return d.promise();
}
var promise = func();
promise.done(function(){
	typing('.typ_second');
});

「split」関数を使って対象の文字を、一文字ずつ分解してから「span」タグで囲み、元の位置に再配置。
今回は上段を表示してから下段を表示したいので「非同期処理」を利用。

サンプル

「実行」をクリックでタイピング風に表示。

jQueryでテキストをタイピング風に一文字ずつ表示

実行