HTML 流れる文字を実装したい

Question

実現したいこと

リンク内容
上記のように Webページの**自分らしい、その瞬間を。**の部分を左から流れるように表示させたい

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

上記のURLのように真似をしてみて実施してみたが文字が消えてしまった。

該当のソースコード

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

.top-header-nav-area_tagline {
    padding-top: 2px;
    color: #666;
    letter-spacing: 0.1em;
}
.top-header-nav-area_tagline .jpn {
    display: block;
    margin-bottom: 8px;
    font-size: 2.1rem;
    line-height: 1.4;
    opacity: 0;
}
.top-header-nav-area_tagline .jpn span {
	display: inline-block;
	opacity: 0;
	transform: translateY(14px);
	transition-property: all;
	transition-timing-function: cubic-bezier(.12,.59,.41,.95);
	transition-duration: 0.9s;
}
.top-header-nav-area_tagline .jpn span.move {
	opacity: 1;
	transform: translateY(0);
}

var spWindow = 559;
var tbWindow = 959;



$(function() {
    // ローディング画面
    //page-fade
    var loadingImg = $(".loading-img");
    loadingImg.fadeOut(500,contFadeIn);
    function contFadeIn(){
        $("#contents-wrap").addClass('fade-in');
    }

    var underPageTtlEng = $(".page-ttl .eng");

    var windowWidth = document.documentElement.clientWidth;
	if(windowWidth <= spWindow) {
        //画面サイズ559以下
		setTimeout(function(){
			pageTtlMove();
		},800);
		setTimeout(function(){
			underPageTtlEng.addClass('fade-in');
		},1400);
		//画面サイズ559以下
		$(window).scroll(function (){
			$('.fadein').each(function(){
				var elemPos = $(this).offset().top,
					scroll = $(window).scrollTop(),
					windowHeight = $(window).height();
				if (scroll > elemPos - windowHeight + 120){
					$(this).addClass('scrollin');
				}
			});
		});
	} else if (windowWidth <= tbWindow) {
        //画面サイズ959以下
		setTimeout(function(){
			pageTtlMove();
		},800);
		setTimeout(function(){
			underPageTtlEng.addClass('fade-in');
		},1400);
        //画面サイズ959以下
		$(window).scroll(function (){
			$('.fadein').each(function(){
				var elemPos = $(this).offset().top,
					scroll = $(window).scrollTop(),
					windowHeight = $(window).height();
				if (scroll > elemPos - windowHeight + 250){
					$(this).addClass('scrollin');
				}
			});
		});
    } else {
        //画面サイズ960以上
		setTimeout(function(){
			pageTtlMove();
		},800);
		setTimeout(function(){
			underPageTtlEng.addClass('fade-in');
		},1600);
        //画面サイズ960以上
		$(window).scroll(function (){
			$('.fadein').each(function(){
				var elemPos = $(this).offset().top,
					scroll = $(window).scrollTop(),
					windowHeight = $(window).height();
				if (scroll > elemPos - windowHeight + 350){
					$(this).addClass('scrollin');
				}
			});
		});
	}
    function pageTtlMove() {

		var container = $(".page-ttl .jpn");
		var speed = 90;
		var content = container.html();
		var text = $.trim(content);
		var ttlHtml = "";

		text.split("").forEach(function(v) {
			ttlHtml += '<span>' + v + '</span>';
		});

		container.html( ttlHtml );

		var txtNum = 0;
		container.css({opacity: 1});
			setInterval(function() {
			container.find('span').eq(txtNum).addClass("move");;
			txtNum++
		}, speed);
	}
});

試したこと・調べたこと

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

上記の詳細・結果

上記参考サイトを真似してみた。
しかし、文字が表示されなくなってしまった。

補足

特になし

Answer 1

横方向のアニメーションだけでしたら、以下のようにCSSで実装すると楽かもしれません。
参考: 【CSSアニメーション】画像が横スクロールし続ける無限ループの作り方 | Rita-plus.web

Answer 2

どこまで再現性をたかめたいかによりますがこんな感じで

<script>
window.addEventListener('DOMContentLoaded',()=>{
  const jpn=document.querySelector('.top-header-nav-area_tagline .jpn');
  const eng=document.querySelector('.top-header-nav-area_tagline .eng');
  const txt=jpn.textContent;
  jpn.textContent="";
  jpn.style.display="flex";
  eng.style.opacity=0;
  const fragment = txt.split("").reduce((x,y)=>(x.append(Object.assign(document.createElement('div'),{textContent:y,})),x),document.createDocumentFragment());
  const keyframes=[{opacity:0,transform:'translateY(20px)',},{opacity:1,transform:'translateY(0px)'}];
  const duration=1000;
  const offset=100;
  const fill='forwards';
  const getPlayer=(targetElement,delay=0)=>new Animation(new KeyframeEffect(targetElement,keyframes,{duration,fill,delay}),document.timeline);   
  [...fragment.children].forEach(async(x,y,z)=>{
    x.style.opacity=0;
    const player=getPlayer(x,y*offset);
    player.play();
    await player.finished;
    if(z.length==y+1){
      jpn.textContent=txt;
      getPlayer(eng).play();
    }
  });
  jpn.appendChild(fragment);
});
</script>
<style>
</style>
<div class="top-header-nav-area_tagline">
<p class="jpn">自分らしい、その瞬間を。</p>
<p class="eng">Own your time.</p>
</div>

Comments

[makiharajin_74]

回答ありがとうございます。
試したところ問題が解決しました。ただ、コードが少し複雑と感じたためサンプルとして使わせていただきました。
そのため、ベストアンサーに選ばせていただきました。