テキストの無限ループ(フォントサイズ固定)を実装するコードを教えてください。

実現したいこと

テキストの無限ループを実装したいです。

・テキストはPCで固定値(px)、ブレイクポイントを仮に750px以下として、750以下はテキスト可変にしたいです。
・HTMLに記述する文字は1文のみで、JSでクローンして文字が無限ループしているように見せたいです。
・GSAPをできれば使用したいです。
→私自身が、参考にしているサイトがGSAPだったので、解決してスッキリしたいという思いもあり…。
ですが、GSAPでなくてJSのみでも大丈夫です。

参考にしたサイトは以下です。
https://18trip.jp/
→テキストが1つ(JSでテキストをクローン)で無限ループ

 https://www.ntvart.co.jp/
→テキストが一つではないので、動きを参考にしました。

発生している問題

ウインドウサイズに対して、仮に
=============ウィンドウサイズ===============
イントロダクション　イントロダクション　イントロダク

上記のようにしたいのですが、
PCでフォントサイズを固定値(px)にすると、ウィンドウサイズを広げた際に
=============ウィンドウサイズ==============
イントロダクション

と1つが流れてから2つ目が流れてきて、意図したようにならずにいます。

試したこと

https://teratail.com/questions/h28fuiblphdz7j
上記の質問者さまも挙げておられますが、
・CSS
https://webabc.hatenablog.jp/entry/css-text-infinite-loop
・GSAP
https://zenn.dev/yuhua_shi/articles/2b47d07c92aa6a
(上記2つはテキストが可変になっている)

を参考にかつ、「実現したいこと」で挙げた参考サイトをもとに実装してみました。

該当のソースコード

html
1<div class="marquee_wrap">
2　<h2 class="marquee"><span>INTRODUCTION</span></h2>
3</div>

css
1.marquee_wrap {
2  width: 100%;
3  background-color: #c8ff46;
4  border-top: #000 solid 1px;
5  border-bottom: #000 solid 1px;
6  box-sizing: border-box;
7  overflow:hidden;
8}
9.marquee {
10  font-size: 265px;
11  line-height: 1em;
12  color: #323232;
13  height: 310px;
14  line-height: 310px;
15  display: flex;
16}
17.marquee span {
18  display: block;
19  padding-right: 140px
20}

JS
1前提として
2・テキストをクローンする
3・画面幅を取得する
4を記述して、
5
6https://18trip.jp　を参考に、
7「gsap.fromTo」を使いましたがうまくいきませんでした。
8
9また、「tl.to」でも実装してみましたが、問題としている現象は解決しませんでした。

補足情報

テキストシャドウを使用する
https://codepen.io/tak-dcxi/pen/KKLRVoE
も拝見しました。
テキストの無限ループ(テキスト固定値)は、何で実装するのがいいのでしょうか？
正解はないと思いますが、最近の動向も把握したく。

よろしくお願いいたします。

yambejp

2024/07/17 01:01

いわゆるマーキーを希望されているのはわかりますが、具体的な動作がわかりません。文字を左から右に流したいのでしょうか？「750以下はテキスト可変」の意味がわからないのですが、画像などで図示できませんか？

退会済みユーザー

2024/07/17 01:18

yambejpさまご質問ありがとうございます。また、質問が意図が汲み取りづらい文章で申し訳ありません。動作は、左から右に流したいです。 750以下はテキスト可変の意味、ですが参考サイトであげさせていただいた(全てリンク切れしていたのを修正しました。) https://18trip.jp/の無限ループしているところ(指し示す画像は、元の質問のところに添付しました)のように、ウィンドウサイズを広げると、フォントは固定値だと思いますが、狭めると一定のところでフォントがウィンドウサイズに対して可変していると思います。 750以下はテキスト可変とは、fontサイズの指定が、PCだとpx、SP(所謂ブレイクポイント)だとrem、みたいにしたいという認識です。

yambejp

2024/07/17 02:49 編集

とりあえずサンプル上げておきました。動作確認して想定と違う場合は具体的にどこをどうしたいか指摘ください。また、途中で「ウィンドウサイズを広げる」必要があるのかちょっと疑問ですが、その場合はresizeイベントで初期化する必要があるでしょうね・・・

退会済みユーザー

2024/07/17 02:16

ありがとうございました。ウィンドウサイズを広げて確認する、みたいな状況が発生した場合 resizeイベントで初期化する方法も覚えておきます！

行動規範の内容に同意します

回答1件

ベストアンサー

無限テキストでスライドするサンプル

html
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const w1=window.innerWidth;
4  const span=document.querySelector('.marquee span');
5  const w2=span.getBoundingClientRect().width;
6  document.head.appendChild(Object.assign(document.createElement('style'),{textContent:`:root{--offset:-${w2}px;}`}));
7  Array(Math.ceil(w1/w2)).fill(null).forEach(()=>span.after(span.cloneNode(true)));
8});
9</script>
10<style>
11.marquee{
12  overflow-x:hidden;
13  animation:slide 2s linear infinite;
14  word-break:keep-all;
15  white-space: nowrap;
16}
17@keyframes slide{
18  from{margin-left:0;}
19  to{margin-left:calc(var(--offset));}
20}
21</style>
22<div class="marquee_wrap">
23<h2 class="marquee"><span>INTRODUCTION&nbsp;|&nbsp;</span></h2>
24</div>