以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、
HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか
試しに作ってみたので紹介してみたいと思います。

jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法

まずは動作サンプルから。

「jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示

ページロードするとテキストが
1文字ずつタイプライターのように表示されます。

この動作の全体構成について
まずはHTMLから。

◆HTML
<p class="split">jQueryでテキストを一文字ずつ読み込むサンプルテキストです。</p>

HTMLでは通常の文章を構成する時と同じように
テキストを<p>タグで囲ってあります。

サンプルでは<p>タグにクラスをつけていますが
特にクラスをつけることが必須ではありません。

もちろん<p>タグ以外でも
<div>や、<span>でも実装可能です。

これに対してCSSは以下の様になります。

◆CSS
.textSplitLoad {
	display: none;
}
.split {
	visibility: hidden;
}

CSSでは動作を実装するテキストが
ページロード時に一瞬表示されてしまわないように
「.textSplitLoad」に対して「display:none;」をつけることが必須となっており、
併せて、親要素(サンプルでは「.split」)に対しては「visibility:hidden;」を入れておきます。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var setElm = $('.split'),
	delaySpeed = 200,
	fadeSpeed = 0;

	setText = setElm.html();

	setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
		var elmThis = $(this);
		if (this.nodeType == 3) {
			var $this = $(this);
			$this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
		}
	});
	$(window).load(function(){
		splitLength = $('.textSplitLoad').length;
		setElm.find('.textSplitLoad').each(function(i){
			splitThis = $(this);
			splitTxt = splitThis.text();
			splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
		});
		setTimeout(function(){
				setElm.html(setText);
		},splitLength*delaySpeed+fadeSpeed);
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

var setElm = $(‘.split’) テキストを囲う親要素(クラス無しでもIDでも可)
delaySpeed = 200 次のテキストが表示されるまでの時間
fadeSpeed = 0 テキストが表示される際のフェードアニメーション時間

これらの設定値を変更することで
テキストの表示時間など微調整が可能になっています。

テキスト表示のスピードは「delaySpeed」で設定するようにしてあるので
ここの値を大きくしたり小さくすることで
表示されるタイミングが早くなったりゆっくりになったりします。

親要素内に太字にする<strong>タグや
別の装飾を施したタグが入っていたとしても
1文字ずつ表示することが可能になっています。

例えば下記のようにテキスト中に他のタグが入っていた場合でも、

◆HTML
<p class="split"><strong>jQuery</strong>でテキストを<span class="textColor">一文字</span>ずつ読み込むサンプルテキストです。</p>

これを実行させたパターン。

「テキスト装飾付:jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示

スクリプト開始部分の「fadeSpeed」でテキストが表示される際に
フェードアニメーションを設定することが可能になっているので
ここの値を増やすことでタイプライターとは少し違った雰囲気で
テキストを1文字ずつフェードインさせながら表示することが可能になります。

「フェード表示:jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示

タイプライターのようにテキストを1文字ずつ表示させる際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

SHARE

Comments (8)

  • zm | 2014.07.11 0:07

    はじめまして。いつも参考にさせていただいております。

    当スクリプトを使用したいと思い、各ブラウザで動作の検証をしたところ、IE8だけ動作しませんでした。
    当方の環境(Win7)では、IE系ですと7、9、10、11は問題なく動作しております。

    どうしてもIE8でも動作するようにしたいのですが、原因がわからず…
    もしIE8で動作しない原因や改善策がおわかりでしたら、ご教示いただけますと幸いです。
    よろしくお願いいたします。

  • BlackFlag | 2014.07.11 2:17

    >zmさん
    コメントありがとうございます。
    このタイプライタースクリプトをご活用いただいている様で
    嬉しく思っております。

    IE8の件ですが、XPサポート終了以降
    自分の中では制作物の確認対象に入っておりませんでした。。

    IE8でも当記事のスクリプトが動作するように
    スクリプト23行目に「display:inline」を「display:inline-block」に修正致しました。

    サンプルファイル共に反映しておりますので
    ご確認いただければと思っております。

    よろしくお願いします。

  • zm | 2014.07.14 2:02

    返信が遅くなり、大変申し訳ございません。

    IE8は確認対象外だったのですね。お手数をお掛けいたしました。
    修正済みのスクリプトに入れ替えたところ、無事IE8でも動かすことができました。

    早急にご対応いただき、ありがとうございました。

  • ツバサ | 2015.10.23 22:46

    こちらの記事を参考にさせていただきました。このスクリプトとCSS3を組み合わせて
    使いたいと考えています。

    スクリプトの読み込みが終了してから実行までをsetTimeout等で、遅らせることはできるのでしょうか?
    CSS3のアニメーションを先に処理してから、このスクリプトを使いたいと考えています。

  • BlackFlag | 2015.10.24 22:58

    >ツバサさん
    コメントありがとうございます。
    当記事のタイプライタースクリプトをご活用いただいている様で
    嬉しく思っております。

    CSS3のアニメーションを先に処理してからこのスクリプトを実行させるには
    当ブログ別記事で紹介させていただいております、

    ・CSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition End with JavaScript」
    https://black-flag.net/jquery/20150929-5777.html

    こちらのjQueryプラグインを使用することで
    実現できるのではないかと考えております。

    お試しください。
    よろしくお願いします。

  • kamo | 2018.01.28 10:04

    はじめまして。いつも参考にさせていただいております。

    ここで紹介されているスクリプトがすてきなのでぜひ利用させて頂きたく思っています。
    jquery-3.2.1.min.jsをベースに読み込みを行うとうまく動いてくれません。
    Ver.2.2.2ではちゃんと表示できたのですがベースを3.2.1にしようとすると
    動かず、悪戦苦闘中です。

    $(window).load(function(){ の部分を
    $(window).on(“load”,function(){ に変更したのですが
    もっと変更が必要なのだと思うのですが、どこをどう直せばよいのか、
    アドバイスをいただけますでしょうか。
    どうぞ、よろしくお願い申しあげます。

  • BlackFlag | 2018.02.04 10:27

    >kamoさん
    コメントありがとうございます。
    このタイプライタースクリプトをご活用いただいている様で
    とてもうれしく思っております。

    jQuery3系での使用については
    仰る通り「.load()」イベントが廃止になりましたので
    「.on()」を使って処理していただくことになります。

    jQuery3.2.1で「.on(‘load’, function(){})」を使用した場合
    ローカルでは動作がしなくなっているようなので
    サーバにアップしながら動作確認していただく必要がありそうです。

    その他の部分については
    特に変更することなく動作させられると思います。

    ご確認の程、よろしくお願いします。

  • kamo | 2018.02.04 11:21

    早速のご回答ありがとうございます、kamo です。

    >ローカルでは動作がしなくなっているようなので
    >サーバにアップしながら動作確認していただく必要がありそうです。
    ————–
    ローカルでしか動作確認しておらず、失礼いたしました。
    サーバーアップで動作するとのこと、アドバイスありがとうございます。
    まだページ途中なので、サーバーアップは少し先になりますが
    変更箇所以外は、そのままで利用できるならとても助かります。
    JSはほとんど書けないので、貴サイトで紹介されている内容はとても
    参考になります。ありがとうございました。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して