実現したいこと
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 コメント