ループする横スクロール画像の作り方

概要

Web サイトのトップページでファーストビューに置ける横に流れる画像の組み方です。CSS アニメーションを使って無限ループさせます。

横長の画像を用意する

画像の左端と右端がシームレスに繋がっている画像を用意してください。
同じ画像を 2 枚横並びにして 1 枚に結合したものを使います。

HTML

HTML は id 指定した div に img を挟んでやるだけです。

<div id="loop_slider">
  <img src="/images/slider.jpg" alt="">
</div>

CSS

#loop_slider {
  display: flex;
  width: 100vw;
  overflow: hidden;
}

#loop_slider img {
  animation: move_bg 100s linear infinite;
  height: 500px;  // 表示させたい高さ
}

@keyframes move_bg {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

解説

親要素のスタイル

親要素となる #loop_slider は 100vw で横幅いっぱいに領域を取ります。
要素が何も wrap されていない場合は画像の横幅分だけ伸びてブラウザ自体を横スクロールできてしまうので、overflow プロパティを hidden にします。

子要素のスタイル

子要素となる #loop_slider img には animation プロパティを指定します。

// 名前にmove_bgを指定
animation-name: move_bg;

// アニメーションの長さを100秒に指定
animation-duration: 100s;

// アニメーションの動作速度を等速にする
animation-timing-function: linear;

// 繰り返し回数を無限に指定する
animation-iteration-count: infinite;

height は表示させたいお好みの高さを指定します。

キーフレームの指定

from から to にかけて translateX を 0 から画像全体の半分の長さだけマイナス方向（左方向）に移動するように指定します。
これで指定秒数をかけて左方向にスクロールし、その後元の位置に戻って再び同じ速度にスクロールを繰り返します。

注意点

translateX(-50%) の値指定の場合、iPhone Safari で幅の計算が正しく行われずスクロールしないことがあります。
その場合は -50% の値を px の実寸に書き換えてください。

この場合、元画像の横幅÷ 2 ではなく、 表示サイズの横幅÷2 にします。

幅 3,000px × 高さ 1,000px の画像を 1,500px × 500px で表示させた場合は translateX(-1500px) ではなく translateX(-750px) になります。