テキストの無限ループ(スライド)を行うコードを教えてください。

実現したいこと

https://creaimo.jp/
至急、上記の参考サイトのMVのようにテキストを無限にスライドさせる方法を知りたいです。

テキストは可変される動作だと一番イメージに近いのですが、参考サイトのように可変無しでブレイクポイントによってフォントサイズを変える(メディアクエリ)動作でも問題ありません。

ループさせたいテキストの文字数は12文字になります。(ローマ字なので6文字間隔で半角スペースあり)
フォントサイズはpcだと100px〜200pxくらいを想定しています。

お手数お掛けしますが、どなたか参考になるコードを教えてください。(できれば解説もお願いできればありがたいです・・・)

試したこと

①CSSで無限ループさせる
https://webabc.hatenablog.jp/entry/css-text-infinite-loop

一番再現性が高かったですが、画面幅を縮めると一つ目のテキストと二つ目のテキストの間が詰まるのでダメでした。

②スライダー系プラグインで無限ループさせる
https://tech.aainc.co.jp/archives/13540

これも画面幅を縮めると一つ目のテキストと二つ目のテキストの間が詰まるのでダメでした。

③GSAPでループさせてみる
https://zenn.dev/yuhua_shi/articles/2b47d07c92aa6a

これも①②と同様でした。

補足情報(FW/ツールのバージョンなど)

再現さえできればCSSでも、JSでも、GSAPなどのライブラリでもなんでも良いです。

コメントを投稿

0 コメント