CSSだけでmarqueeのような無限スクロールを実装する方法

marqueeとは

<marquee>はスクロールする領域を挿入できるHTMLタグ。

昔のWebサイトではよく使用されていたが、現在は非推奨タグとなっているため使用されているケースは少ない。

marqueeは右から表示されて、すべてが左の外側に流れるまでループ再生されない。

最初から左端に先頭を表示させることもできず使い勝手も悪い。

🍣
🍱
🍔
🍟
🧋
🍣
🍱
🍔
🍟
🧋
<style>
marquee > div {
  display: inline-block;
  margin-right: 70px;
  font-size: 70px;
}
</style>
<marquee scrollamount="20" scrolldelay="0">
  <div>🍣</div>
  <div>🍱</div>
  <div>🍔</div>
  <div>🍟</div>
  <div>🧋</div>
  <div>🍣</div>
  <div>🍱</div>
  <div>🍔</div>
  <div>🍟</div>
  <div>🧋</div>
</marquee>

そのため、現在はJavaScriptで無限スクロールを実装しているWebサイトが多いが、HTMLとCSSだけでも以下のように実装できる。

🍣
🍱
🍔
🍟
🧋
🍣
🍱
🍔
🍟
🧋

※ iwb.jpはWordPressを利用しているので絵文字ではなくimgタグに置換されているが、どちらでも実装可能。

HTMLとCSSだけで無限スクロール

HTMLとCSSだけで無限スクロールするにはまずHTMLで以下のような構造のHTMLを作成する。

.scroll-parent内には.scroll-childが2つあり、1つ目の.scroll-childが最初に表示されて、CSSアニメーションで右から左に動かす。

次に2つ目の.scroll-childを右から左に動かして後続は1つ目を右から左に動かして無限ループさせる。

<div class="container">
  <div class="scroll-parent">
    <div class="scroll-child">
      <div>🍣</div>
      <div>🍱</div>
      <div>🍔</div>
      <div>🍟</div>
      <div>🧋</div>
    </div>
    <div class="scroll-child">
      <div>🍣</div>
      <div>🍱</div>
      <div>🍔</div>
      <div>🍟</div>
      <div>🧋</div>
    </div>
  </div>
</div>
🍣
🍱
🍔
🍟
🧋
🍣
🍱
🍔
🍟
🧋

CSSは.scroll-childにCSSアニメーションを5秒、linear、infiniteで設定して無限ループさせています。

.scroll-childのanimation-nameは1番目をfirst、2番目をsecondとしています。

1番目はleftを0%から-100%、2番目を100%から0%にCSSアニメーションを設定することで無限ループを実装しています。

.container {
  overflow: hidden;
  width: 100%;
  height: 70px;
}

.scroll-parent {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: inherit;
}

.scroll-child {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  left: 0%;
  top: 0%;
  width: inherit;
  height: inherit;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroll-child > div {
  font-size: 70px;
}

.scroll-child:nth-child(1) {
  animation-name: first;
}

.scroll-child:nth-child(2) {
  animation-name: second;
}

@keyframes first {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes second {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

CSSだけで無限スクロールを実装したサンプル

ちなみにleftプロパティをすべてrightに変えれば無限スクロールを左から右に変更できます。

CSSだけで左から右の無限スクロールを実装したサンプル