実現したいこと
テキストの無限ループを実装したいです。
・テキストは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
も拝見しました。
テキストの無限ループ(テキスト固定値)は、何で実装するのがいいのでしょうか?
正解はないと思いますが、最近の動向も把握したく。
よろしくお願いいたします。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー