スクロールに合わせてテキストがアニメーションし無限ループするようにしたい

実現したいこと

上部に固定されたテキストがスクロールに合わせて横に動き、そのテキストが無限ループするようにしたいです。

前提

スクロールに合わせてテキストが左右にアニメーションする動きを作っているのですが、
その入力したテキストが無限ループせずに端が切れてしまい、アニメーションに終わりが見えてしまいます。

試したこと

テキスト自体を増やしFlexboxを使用して配置しましたが、無限ループせずにテキストに終わりが見えてしまいます。

該当のソースコード

HTML

1<div class="all"> 2 <div class="parallax-wrap"> 3　 　<div class="parallax-anim"> 4　　 　　<span class="parallax-inline">ダミーテキストです。</span> 5　　　 　<span class="parallax-inline">２つ目のダミーテキストです。</span> 6　　　　 <span class="parallax-inline">ダミーテキストです。</span> 7　　　　 <span class="parallax-inline">２つ目のダミーテキストです。</span> 8　 　　　<span class="parallax-inline">ダミーテキストです。</span> 9　　 　　<span class="parallax-inline">２つ目のダミーテキストです。</span> 10 　　</div> 11 </div> 12 13 <section> 14 <h2>セクションのタイトル</h2> 15 <p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p> 16 </section> 17 18 <section> 19 <h2>セクションのタイトル</h2> 20 <p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p> 21 </section> 22 23 <section> 24 <h2>セクションのタイトル</h2> 25 <p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p> 26 </section> 27 28</div>

CSS

1.all{2 position: relative;3 overflow: hidden;4 padding-top:50px;5}6.section{7 margin-top:150px;8}9 10.parallax-wrap{11 position: fixed;12 height: 50px;13 width: 100%;14 top: 0;15 left: 0;16 background: #000;17}18.parallax-anim{19 opacity: 1;20 position: relative;21 top: 0;22 left: 0;23 display: flex;24 white-space: nowrap;25}26.parallax-inline{27 display: block;28 line-height: 1em;29 font-size: 20px;30 white-space: nowrap;31 color:#fff;32}

javascript

1$(window).scroll(function() {2 const winScroll = $(this).scrollTop();3 console.log(winScroll);4 $('.parallax-anim').css('transform', 'translateX(' + winScroll*0.5 + 'px)');5});

https://jsfiddle.net/zfmoL4qa/

お分かりになられる方、いらっしゃいましたら宜しくお願いします。