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

実現したいこと

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

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

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

該当のソースコード

HTML

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

CSS

1.top-header-nav-area_tagline {2 padding-top: 2px;3 color: #666;4 letter-spacing: 0.1em;5}6.top-header-nav-area_tagline .jpn {7 display: block;8 margin-bottom: 8px;9 font-size: 2.1rem;10 line-height: 1.4;11 opacity: 0;12}13.top-header-nav-area_tagline .jpn span {14 display: inline-block;15 opacity: 0;16 transform: translateY(14px);17 transition-property: all;18 transition-timing-function: cubic-bezier(.12,.59,.41,.95);19 transition-duration: 0.9s;20}21.top-header-nav-area_tagline .jpn span.move {22 opacity: 1;23 transform: translateY(0);24}

jQuery

1var spWindow = 559; 2var tbWindow = 959; 3 4 5 6$(function() { 7 // ローディング画面 8 //page-fade 9 var loadingImg = $(".loading-img"); 10 loadingImg.fadeOut(500,contFadeIn); 11 function contFadeIn(){ 12 $("#contents-wrap").addClass('fade-in'); 13 } 14 15 var underPageTtlEng = $(".page-ttl .eng"); 16 17 var windowWidth = document.documentElement.clientWidth; 18 if(windowWidth <= spWindow) { 19 //画面サイズ559以下 20 setTimeout(function(){ 21 pageTtlMove(); 22 },800); 23 setTimeout(function(){ 24 underPageTtlEng.addClass('fade-in'); 25 },1400); 26 //画面サイズ559以下 27 $(window).scroll(function (){ 28 $('.fadein').each(function(){ 29 var elemPos = $(this).offset().top, 30 scroll = $(window).scrollTop(), 31 windowHeight = $(window).height(); 32 if (scroll > elemPos - windowHeight + 120){ 33 $(this).addClass('scrollin'); 34 } 35 }); 36 }); 37 } else if (windowWidth <= tbWindow) { 38 //画面サイズ959以下 39 setTimeout(function(){ 40 pageTtlMove(); 41 },800); 42 setTimeout(function(){ 43 underPageTtlEng.addClass('fade-in'); 44 },1400); 45 //画面サイズ959以下 46 $(window).scroll(function (){ 47 $('.fadein').each(function(){ 48 var elemPos = $(this).offset().top, 49 scroll = $(window).scrollTop(), 50 windowHeight = $(window).height(); 51 if (scroll > elemPos - windowHeight + 250){ 52 $(this).addClass('scrollin'); 53 } 54 }); 55 }); 56 } else { 57 //画面サイズ960以上 58 setTimeout(function(){ 59 pageTtlMove(); 60 },800); 61 setTimeout(function(){ 62 underPageTtlEng.addClass('fade-in'); 63 },1600); 64 //画面サイズ960以上 65 $(window).scroll(function (){ 66 $('.fadein').each(function(){ 67 var elemPos = $(this).offset().top, 68 scroll = $(window).scrollTop(), 69 windowHeight = $(window).height(); 70 if (scroll > elemPos - windowHeight + 350){ 71 $(this).addClass('scrollin'); 72 } 73 }); 74 }); 75 } 76 function pageTtlMove() { 77 78 var container = $(".page-ttl .jpn"); 79 var speed = 90; 80 var content = container.html(); 81 var text = $.trim(content); 82 var ttlHtml = ""; 83 84 text.split("").forEach(function(v) { 85 ttlHtml += '<span>' + v + '</span>'; 86 }); 87 88 container.html( ttlHtml ); 89 90 var txtNum = 0; 91 container.css({opacity: 1}); 92 setInterval(function() { 93 container.find('span').eq(txtNum).addClass("move");; 94 txtNum++ 95 }, speed); 96 } 97});

試したこと・調べたこと

上記の詳細・結果

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

補足

特になし