HTML 1文字ずつ左から右へふわっと出現をやりたい

Question

実現したいこと

””自分らしい、その瞬間を。””の部分を１文字ずつ左から右へふわっと出現させたい。

→→→→→→→→→→→
自分らしい、その瞬間を。

発生している問題・分からないこと

サンプルコードを真似して書いてみたが動かない。
--失敗--

サンプルコード
https://coco-factory.jp/ugokuweb/move02/8-11/

該当のソースコード

<div class="top_header_nav">
                <!-- tagline -->
                <div class="top-header-nav-area_tagline">
					<p class="jpn eachTextAnime">自分らしい、その瞬間を。</p>
					<p class="eng">Own your time.</p>
		</div>
</div>

.top_header_nav{
    position: relative;
    display: flex;
    align-items: center;
    height: 230px;
    padding-left: 7.2%;
}
/* tagline */
.top-header-nav-area_tagline {
    padding-top: 2px;
    color: #666;
    letter-spacing: 0.1em;
}
.top-header-nav-area_tagline .jpn {
    display: block;
    margin-bottom: 6px;
    font-size: 1.7rem;
    line-height: 1.4;
}
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

$(function() {
// eachTextAnimeにappeartextというクラス名を付ける定義
	function EachTextAnimeControl() {
		$('.eachTextAnime').each(function () {
		var elemPos = $(this).offset().top - 50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight) {
			$(this).addClass("appeartext");
		} else {
			$(this).removeClass("appeartext");
		}
		});
	}
	// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function () {
		//spanタグを追加する
		var element = $(".eachTextAnime");
		element.each(function () {
		var text = $(this).text();
		var textbox = "";
		text.split('').forEach(function (t, i) {
			if (t !== " ") {
				if (i < 10) {
						textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
					} else {
						var n = i / 10;
						textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
					}
			} else {
				textbox += t;
			}
		});
		$(this).html(textbox);
		});
		EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

サンプルコードをそのまま真似して書いたが、反応しない状態

補足

特になし

Comments

[yambejp]

コレではダメなんですか？
https://teratail.com/questions/54nf4hifupu8bx

※マルチポストになっているのでせめて前の質問をクローズしてください

[makiharajin_74]

ありがとうございます。
同じ質問をしてしまいました。すみません。

Answer 1

こうするとどうでしょうか？

// $(function() { 消す
// eachTextAnimeにappeartextというクラス名を付ける定義
	function EachTextAnimeControl() {
		$('.eachTextAnime').each(function () {
		var elemPos = $(this).offset().top - 50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight) {
			$(this).addClass("appeartext");
		} else {
			$(this).removeClass("appeartext");
		}
		});
	}
	// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function () {
		//spanタグを追加する
		var element = $(".eachTextAnime");
		element.each(function () {
		var text = $(this).text();
		var textbox = "";
		text.split('').forEach(function (t, i) {
			if (t !== " ") {
				if (i < 10) {
						textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
					} else {
						var n = i / 10;
						textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
					}
			} else {
				textbox += t;
			}
		});
		$(this).html(textbox);
		});
		EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
// }); 消す

Comments

[makiharajin_74]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。