文字のアニメーション

Question

前提

こちらのサイト(https://coco-factory.jp/ugokuweb/move02/8-11/)
の1文字ずつ表示させるアニメーションを、3つの文章に時間差をつけて使いたいのですが、同時に始まってしまいどのようにすれば良いかがわかりません。
animation-delay:をつけてみましたが、効かなかったです。

Answer 1

.eachTextAnimeの要素にdate属性で、遅延秒数を設定しておいて、

<p class="eachTextAnime" data-delay="0">テキストが1文字ずつ出てきます</p>
<p class="eachTextAnime" data-delay="1">テキストが1文字ずつ出てきます</p>
<p class="eachTextAnime" data-delay="2">テキストが1文字ずつ出てきます</p>

JSの方で、animation-delay: にこの遅延秒数を加算すればどうでしょう。

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
  //spanタグを追加する
  var element = $(".eachTextAnime");

  element.each(function () {
    var delay = Number($(this).data('delay'));
    var text = $(this).text();
    var textbox = "";
    text.split('').forEach(function (t, i) {
      if (t !== " ") {
        var d = i / 10 + delay;
        textbox += '<span style="animation-delay:' + d + 's;">' + t + '</span>';
      } else {
        textbox += t;
      }
    });
    $(this).html(textbox);
  });

  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

CodePenサンプル

Comments

[tumocyan]

できました！ありがとうございます！