無限ループ

Web

CSSとJSで無限ループを実装する

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

【CSS】スクロールを記述

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

【CSSアニメーション】画像が横スクロールし続ける無限ループの作り方 | Rita-plus.web
WEB制作でどんなことができるかを知ることってすごく大事ですよね！ ホームページの制作をする人も、制作してもら | アニ…
Rita-plus.web | ホームページ制作・保守管理はお任せください

左方向は問題なかったのですが、右方向がうまく行かず、画面外の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】複製を記述

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

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

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

コメント