ディスプレイ幅より大きい画像が、横に流れていくアニメーションを、CSSのみで実装

8ミリのフィルムを模した横長の画像が、横に流れていくアニメーションを実装する必要がありました。

PCは特に問題がないのですが、そのままレスポンシブでスマホディスプレイにも対応しようとすると、スマホ画面は幅が400pxほどしかないので、画像の高さが低くなってしまい、8ミリフィルム画像が小さくなってしまいました。

高さを増やすと、一見解決するのですが、よく見ると、横に流れる画像がスマホ幅で切れてしまい、全部の画像を流しきれませんでした。

ということで、スマホなど、ディスプレイ幅がせまい場合、それ以上の横幅がある横長の画像を、切れることなく横に流すアニメーションをCSSのみで実装するコードを紹介します。

html

<div class="film-marquee" aria-hidden="true"></div>

1	<div class="film-marquee" aria-hidden="true"></div>

css

/* ==== 調整用の変数 ==== 
   --film-h : 表示高さ
   --ratio  : 画像のアスペクト比（横÷縦）例）横3600px・縦300pxなら 12
   --speed  : スクロール時間
*/
.film-marquee {
  --film-h: clamp(90px, 18vw, 180px);
  --ratio: calc(3548 / 648);    /* ←あなたの8ミリ画像の「横÷縦」に合わせて必ず設定 */
  --speed: 30s;

  height: var(--film-h);
  overflow: hidden;

  background-image: url("your-8mm-film.png");
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: auto 100%;            /* 高さフィット */
  will-change: background-position;
  animation: film-scroll var(--speed) linear infinite;
}

@media (max-width: 480px) {
  .film-marquee { --speed: 24s; }
}

/* ★ちょうど1タイルぶん(= 高さ×比率)だけ左へ動かす */
@keyframes film-scroll {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * var(--film-h) * var(--ratio)); }
}

/* ==== 調整用の変数 ====

--film-h : 表示高さ

--ratio : 画像のアスペクト比（横÷縦）例）横3600px・縦300pxなら 12

--speed : スクロール時間

.film-marquee {

--film-h: clamp(90px, 18vw, 180px);

--ratio: calc(3548 / 648); /* ←あなたの8ミリ画像の「横÷縦」に合わせて必ず設定 */

--speed: 30s;

height: var(--film-h);

overflow: hidden;

background-image: url("your-8mm-film.png");

background-repeat: repeat-x;

background-position: 0 50%;

background-size: auto 100%; /* 高さフィット */

will-change: background-position;

animation: film-scroll var(--speed) linear infinite;

}

@media (max-width: 480px) {

.film-marquee { --speed: 24s; }

}

/* ★ちょうど1タイルぶん(= 高さ×比率)だけ左へ動かす */

@keyframes film-scroll {

from { background-position-x: 0; }

to { background-position-x: calc(-1 * var(--film-h) * var(--ratio)); }

}

注意点は、 –ratio:の値を、8ミリ画像の「横÷縦」することです。

–ratio: calc(3548 / 648);の、3548 / 648の部分を、ご自分の画像の横縦の値に変更してください。

お試しを！