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

実現したいこと

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などのライブラリでもなんでも良いです。

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

回答2件

[香車]東上☆あらし☆海美「
https://web.havincoffee.com/design/2021/09/2109011.html
いにしえのHTMLタグ、“marquee”とは？CSSによる再現 (ja)

これは、どうでしょう ?
」
回答への修正依頼: スパムと見受けられる内容を含む回答 2023/12/11 09:24
[香車]東上☆あらし☆海美「
[いいね]が一個ついているので、削除しません。
」

投稿2023/12/10 21:34

編集2023/12/11 02:47

umimi

総合スコア429

umimi

2023/12/11 02:49

回答を[編集]するんじゃなくて、指摘に[コメント]つければいいのか。

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

ベストアンサー

ご提示のページのコードのどのあたりがご希望に沿っていないのか今ひとつ飲み込めていないので、この回答もダメかもしれないですが。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/2xn71zou/

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <style>
9    .loop-wrapper {
10      overflow: hidden;
11    }
12
13    .loop-text {
14      animation: loop 1s infinite linear;
15      width: max-content;
16
17      & span {
18        word-break: keep-all;
19        font-size: 10vw;
20      }
21    }
22
23
24    @keyframes loop {
25      to {
26        transform: translateX(-50%);
27      }
28    }
29  </style>
30</head>
31
32<body>
33  <div class="loop-wrapper">
34    <div class="loop-text">
35      <span>ループさせたいテキスト①</span><span>ループさせたいテキスト②</span><span>ループさせたいテキスト①</span><span>ループさせたいテキスト②</span>
36    </div>
37  </div>
38</body>
39
40</html>