電話番号
電話番号

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

ホームページ制作・SEO対策 | 栃木県宇都宮 ジップサービス > ブログ > テキストをタイピング風に一文字ずつ表示する

こんにちは。ジップサービスでデザイナーをしているものです。

今回はテキストをタイピング風に一文字ずつ表示する方法について解説したいと思います。

メインビジュアル上にあるテキストの演出や、意図的に読ませたい内容などに効果的な手法です。

概念は至ってシンプルで、jsで自動的に一文字ごとに「<span>」で挟み、その後、最初の「<span>」からだんだんとフェードアニメーションを掛けていきます。

jQueryの読み込み

今回はjQueryを使用しますので、事前に読み込んでおいてください。
今回はgoogleライブラリからjQueryファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

共通HTML

任意のクラスを付与します。
今回は「typ」としています。

<p class="typ">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

css

.typ {
  opacity: 0;
  }
.typ span {
  opacity: 0;
  }

非表示の状態からjsで表示させていきますので、
cssでまず全て透過0%に設定します。

js

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

1文字ずつ<span> </span>で囲む記述をした後に、
1文字づつフェードインさせる記述をしています。

完成デモ

https://www.gipservice.com/demo/text_js/

まとめ

jsの細かい部分の説明は割愛いたしますが、これでテキストを1文字づつ表示することができます。
色々な部分に利用できそうですね。

Top