[CSS]横スクロールするループアニメーション

今回はCSSを使っての横にスクロールするループアニメーションを作る方法をご紹介します。
HTMLとCSSのみ横スクロールするループアニメーションが簡単に作れますので、サイトに掲載したいとお考えの方はぜひご参照ください。

右から左へスクロールするループアニメーション
左から右へスクロールするループアニメーション
1. サンプル
その他
メリット・デメリット
1. メリット
2. デメリット
まとめ
1. 参考

右から左へスクロールするループアニメーション

html

<div class="scroll-container">
    <div class="scroll-content">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    <div class="scroll-content">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</div>

「 .scroll-container 」はスクロールするコンテンツ全体を包む要素です。
「 .scroll-content 」は、スクロールする具体的な内容を含む要素です。
同じ内容の要素を2つ用意することで、ループの途中でコンテンツが途切れないようにしています。

画像の場合

<div class="scroll-container">
    <div class="scroll-content">
        <div class="item"><img src="images/hogehoge-1.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-2.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-3.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-4.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-5.jp" width="" height="" alt=""></div>
    </div>
    <div class="scroll-content">
        <div class="item"><img src="images/hogehoge-1.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-2.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-3.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-4.jp" width="" height="" alt=""></div>
        <div class="item"><img src="images/hogehoge-5.jp" width="" height="" alt=""></div>
    </div>
</div>

テキストや画像は「.item」に入れてください。その際は2つある「 .scroll-content 」のコードは同じになるようにしてください。

css

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.scroll-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.scroll-content {
    display: flex;
    animation: scroll 10s linear infinite;
}

.item {
    flex: 0 0 auto;
    width: 200px;/*お好みの幅に調整*/
    height: 200px;/*お好みの高さに調整*/
    background-color: lightblue;
    margin: 0 10px;/*左右の余白はここを調整*/
    text-align: center;
    line-height: 200px;
    font-size: 24px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

white-space: nowrapでコンテンツを横に並べ、overflow: hiddenで溢れた部分を隠します。
@keyframes scrollでスクロールアニメーションを定義します。
.scroll-contentのanimationプロパティを使用して、スクロールアニメーションを無限に繰り返します。

スクロール時間の調整

「.scroll-content」の「animation」部分にある「10s」を好みの長さになるように調整してください。

.scroll-content {
    display: flex;
    animation: scroll 10s linear infinite;/*10sを好みに調整してください*/
}

サンプル

See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

左から右へスクロールするループアニメーション

スクロールの方向を逆にしたい場合は下記CSSを修正してください。

@keyframes scroll {
    0% {
        transform: translateX(-100%);/* 左→右 -100%、右→左 0 */
    }
    100% {
        transform: translateX(0);/* 左→右 0、右→左 -100% */
    }
}

サンプル

See the Pen Scroll_Loop_Animation _L-R by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

その他

テキストをループさせることも可能です。

See the Pen Scroll_Loop_Animation Txt by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

主な変更点は下記の「.scroll-container」と「.item」の2箇所となってます。

.scroll-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    align-items: center; /* コンテンツを垂直方向に中央揃え */
}


.item {
    flex: 0 0 auto;
    padding: 0 50px; /* 文字間の余白を調整 */
    font-size: 100px; /* 文字サイズを大きくする */
    line-height: 120px; /* 文字を垂直方向に中央揃え */
    font-weight: bold; /* 文字を太くする */
    white-space: nowrap; /* 文字が折り返されないようにする */
}

メリット・デメリット

横スクロールするアニメーションにはさまざまなメリットとデメリットがあります。以下にそれぞれをまとめました。

メリット

動きのあるコンテンツは、視覚的な魅力を持ち、ウェブページや広告などで注目を集めるのに効果的です。特に、特定のメッセージやプロモーションを強調したい場合には、動きのある要素を活用することが重要です。それに加えて、限られたスペースで多くの情報を伝えたい場合にも動きのあるコンテンツは有効です。また、ブランドの個性やスタイルを表現するための手段としても利用できます。ブログやウェブサイトで動きのある要素を活用することで、読者の関心を引きつけ、情報を効果的に伝えることができます。

視覚的な魅力
情報の強調
スペースの有効活用
ブランドイメージの強化

デメリット

動きのあるコンテンツの導入には注意が必要です。過剰な動きはユーザーを煩わせ、アクセシビリティにも悪影響を与える可能性があります。さらに、パフォーマンスの低下やSEOへの影響も検討すべきです。レスポンシブデザインも課題であり、異なるデバイスに対応する際に慎重な計画が必要です。

ユーザビリティの問題
アクセシビリティの問題
パフォーマンスの低下
SEOへの影響
レスポンシブデザインの難しさ

横スクロールするアニメーションは、視覚的な魅力や情報の強調に役立ちますが、ユーザビリティやアクセシビリティの問題を引き起こす可能性があります。適切なバランスを見つけ、ユーザーにとって快適な体験を提供することが重要です。また、パフォーマンスやSEOにも注意を払いながら、必要に応じてアニメーションのオン/オフを切り替えるオプションを提供するとよいでしょう。

まとめ

いかがでしたか？

今回はCSSのみをつかってループするスライドアニメーションを紹介させていただきました。
企業サイトやブランドサイトでたまにみる写真のループアニメーションを参考に作ってます。写真が多いと華やかですし、動いているだけで他とはひとつ違うサイトにもなりますし目も引きますので、興味のある方は検討してみてはいかがでしょうか？