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

実現したいこと

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

前提

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

試したこと

テキスト自体を増やし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/

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

yambejp

2023/02/08 03:50

下にスクロールすると左から右にスクロールするのでしょうか？

satoshickkk

2023/02/09 01:55

質問ありがとうございます。下にスクロールすると右から左に動き、上にスクロールすると左から右に動くのを想定しております。

回答1件

現在のCSSに、はみ出たコンテンツが逆側から見えるようにする機能はないかと思います。

テキストをあらかじめ充分な回数繰り返して書いておいて、うまくオフセットを調整するのがいいんじゃないでしょうか。
この jsfiddle だと3回繰り返しているので、最初は3個目のテキストを表示するようにします。たとえば、translateX() に与える値を minScroll * 0.5 - document.querySelectorAll('.prallax-inline')[4].offsetLeft にします。

投稿2023/02/07 22:04