左から右にゆっくりと文字を表示させる

2019/12/6 2019/12/13

WEBサイトを見ているとメインビジュアルなどの部分で、サイト名やキャッチフレーズなどが左から右へ1文字ずつ時間差で表示されるのを見たことがありませんか？

ちょっとシャレてますよね

このように左から右へゆっくりと文字を表示したい場合、jQueryを使うことで比較的簡単に実現することが出来ます。

今日は「左から右に時間差で1文字ずつ文字を表示する」方法について書きたいと思います。

1 実装
2 長いテキストでも使えます
3 何かの参考になれば幸いです

実装

<h1>YUNTU-TEK</h1>

左から右にゆっくり表示したい文字をh1タグで囲っています。

h1 {
  text-align: center;
  font-size: 40px;
}

$(function() {
  //h1要素を変数に代入する
  var h1 = $('h1');

  //h1要素の中の文字を一文字ずつ分割して配列(txt_array)に入れる
  var txt_array = h1.text().split('');

  //h1要素の中身を空にする
  $('h1').html('');

  //配列に入っている文字数分だけ処理を繰り返す
  $.each(txt_array, function(index, element) {

    //<span style="opacity: 0">配列に入っている1文字</span>という要素を作成する
    var new_element = $("").text(element).css({ opacity: 0 });

    //作成した要素をh1要素の末尾に追加していく。
    h1.append(new_element);

    //indexの数値 * ミリ秒だけ処理を遅延させる。
    //indexの数値は後方の文字にいくほど大きくなるので
    //それにミリ秒を乗じる事で後ろの文字ほど処理が遅延し文字が遅れて現れる
    new_element.delay(index * 100);

    //animateを使って3000ミリ秒（3秒）の時間をかけて
    //opacityを1（不透明）にしてジワッと文字を出現させる
    new_element.animate({opacity: 1}, 3000);

  });
});

以下がデモになります。

「Run Pen」をクリックしてみてください

See the Pen type1 by yuntu (@yuntu-tek) on CodePen.

2文字目以降を早く表示させたい場合はjQueryの「new_element.delay(index * 100);」の100という数値を変更します。

単位はミリ秒（1,000ミリ秒 = 1秒）となっており数値を小さくすると早くなりますし、大きくすると遅くなります。

また現在の設定では1つ1つの文字の色がじわーっと濃くなるようになっています。

もっと速く文字の色を濃くしたい場合には「new_element.animate({ opacity: 1 }, 3000);」の3000をいう数値を変更します。

こちらも単位はミリ秒で、速く濃くしたい場合はもっと小さい数値に、逆にゆっくり濃くしたい場合は数値を大きくします。

長いテキストでも使えます

さきほどは「YUNTU-TEK」という9文字の短いテキストでしたが、もっと長いテキストでも同じように左から右にゆっくりと文字を出現させることができます。

例えば以下のような文章でも

寿限無寿限無五劫のすりきれ海砂利水魚の水行末雲来末風来末食う寝るところに　住むところやぶらこうじのぶらこうじパイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナの長久命の長助

「Run Pen」をクリックしてみてください

See the Pen type2 by yuntu (@yuntu-tek) on CodePen.

jQueryで変更した部分は「delay」と「animation」の秒数の数値を小さくしたことだけです。

長いテキストの場合は文字の出現がゆっくりすぎると読んでいてかったるく感じてくるので、「new_element.delay(index * 100)」から「new_element.delay(index * 50)」に変更し、「new_element.animate({opacity: 1}, 3000)」も「new_element.animate({opacity: 1}, 1000)」に変更しています。

こんな感じで長めのテキストでもdelayやanimateのタイミングを調節するだけでOKです。