横スクロールの無限アニメーションをCSSのみで実装する【JS無し】

2024/06/25 著者:牧野健人

導入事例のロゴエリアなどでよくある「要素が横スクロールで無限に流れ続けるUI」をJavaScriptを使わずにCSSのみで実装する方法を解説します。

完成イメージは以下の通りです。

記事の著者牧野健人

株式会社リラクス代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

横スクロールアニメーションのHTML・CSS
- HTML
- CSS
使い方

横スクロールアニメーションのHTML・CSS

使用するHTML・CSSは下記の通りです。

HTML

<!-- 
--marquee-number-of-items: 要素の数
--marquee-animation-speed: アニメーションのスピード（要素の数の整数倍を指定）
--marquee-position: --marquee-number-of-itemsマイナス1から始めて0で終わるように、各要素に数値を振る。例えば今回なら、8マイナス1なので7から始めて0で終わる。
-->
<div class="marquee" style="--marquee-number-of-items: 8; --marquee-animation-speed: 32s;">
    <div class="marquee__item" style="--marquee-position:7;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
    <div class="marquee__item" style="--marquee-position:6;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
    <div class="marquee__item" style="--marquee-position:5;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
    <div class="marquee__item" style="--marquee-position:4;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
    <div class="marquee__item" style="--marquee-position:3;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
    <div class="marquee__item" style="--marquee-position:2;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
    <div class="marquee__item" style="--marquee-position:1;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
    <div class="marquee__item" style="--marquee-position:0;">
        <img src="https://placehold.jp/f9f9fa/afafaf/200x70.png?text=image" alt="代替テキスト" class="marquee__image">
    </div>
</div>

CSS

:root {
    --marquee-item-width: 200px;
    --marquee-item-height: 70px;
}
.marquee {
    margin-inline: auto;
    position: relative;
    height: var(--marquee-item-height);
    overflow: hidden;
}
.marquee__item {
    width: var(--marquee-item-width);
    height: 100%;
    position: absolute;
    left: max(calc(var(--marquee-item-width) * var(--marquee-number-of-items)), 100%);
    animation: marquee-scroll var(--marquee-animation-speed) linear infinite;
    animation-delay: calc(var(--marquee-animation-speed) / var(--marquee-number-of-items) * var(--marquee-position) * -1);
}
@keyframes marquee-scroll {
    to {
        left: calc(var(--marquee-item-width) * -1);
    }
}

使い方

本コードを使用する際、CSSを編集する必要はありません。HTMLはsrc属性とalt属性を任意のものに書き換えた上で、以下の3種類の値をケースに応じて調整してください。

`--marquee-number-of-items`

要素（.marquee__item）の数を入れてください。上記の例だと8個なので、--marquee-number-of-items: 8;としています。

`--marquee-animation-speed`

アニメーションのスピードを指定する箇所です。デモと同じスピードにする場合は、--marquee-number-of-itemsの4倍に当たる数値を入れてください。例えば--marquee-number-of-itemsが12なら--marquee-animation-speed: 48s;になります。

`--marquee-position`

.marquee__itemについている--marquee-positionは、「--marquee-number-of-itemsの値マイナス1」から始めて0で終わるように、各要素に数値を振ってください。例えば今回なら--marquee-number-of-items: 8;なので、最初の.marquee__itemの要素（7行目）を--marquee-position:7;にしています。