無限ループ

無限ループを実装しようと検索しまくったので、メモ。テキストを無限ループさせ、右方向と左方向に移動させる仕組みを当初swiperで実装しました。初めのうちは想定どおり動いたのですが、何巡かした後や、別のタブを開いて、戻ってきた後に右方向だけ異常なスピードでスクロールしてしまう現象があり、採用することを断念。その次の策として、検索結果で見つかったCSSの無限スクロールを使うことに。

下記サイトを参考に、CSSの無限スクロールを実装しました。

左方向は問題なかったのですが、右方向がうまく行かず、画面外のflex-boxの幅がおかしいのかなと、jsで幅を取得し、固定してみたりしましたが、想定どおりの動きにはなりません。で色々やってみた結果、ケアレスミスでした。単純に0から-100%だったのを-100%から0にすれば、右側に動きます。

@keyframes loop-normal {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes loop-reverse {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

あと、やってみてわかったのですが、同じものがもう一つ後ろにないと、無限スクロールっぽくみえないことに気がつきました。スクロールさせる文字が複数列あったので、jsでコントロールした方が良いなと思い、スクロールさせる列は同じものを複製するようにすると、コピペの手間をかけずに済みます。とりあえず、これで想定した動きができました。

const textItems = document.querySelectorAll('.heroScrolltxt__bg .swiper-wrapper')

textItems.forEach((textArray) => {
 const copySelf = textArray.cloneNode(true)
 textArray.parentElement.append(copySelf)
});