実現したいこと
上部に固定されたテキストがスクロールに合わせて横に動き、そのテキストが無限ループするようにしたいです。
前提
スクロールに合わせてテキストが左右にアニメーションする動きを作っているのですが、
その入力したテキストが無限ループせずに端が切れてしまい、アニメーションに終わりが見えてしまいます。
試したこと
テキスト自体を増やし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">2つ目のダミーテキストです。</span> 6 <span class="parallax-inline">ダミーテキストです。</span> 7 <span class="parallax-inline">2つ目のダミーテキストです。</span> 8 <span class="parallax-inline">ダミーテキストです。</span> 9 <span class="parallax-inline">2つ目のダミーテキストです。</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/
お分かりになられる方、いらっしゃいましたら宜しくお願いします。
回答1件