【CSSアニメーション】
画像が無限に横スクロールするループの作り方
Web制作において「何ができるのか」を知ることはとても大切です。
ホームページを作る側も、依頼する側も、表現の幅を知ることでより魅力的でオリジナリティのあるサイトづくりが可能になります。
今回は「画像を横に無限スクロールさせるアニメーション」の作り方をご紹介します。
■ Step 01：画像を右から左へ無限ループさせる
まずは、画面の右側から左側に向かって画像が無限に流れ続ける仕組みをHTMLとCSSで実装していきます。
以下のHTMLの sample.png は、任意の画像URLに差し替えてご利用ください。
▼ HTML構造
▼ HTMLのポイント
この構造では、4枚の画像を2セット並べることで、1セットが左に流れた後にもう1セットが続く仕組みを作り、ループが切れ目なく続くようにしています。
画像の枚数は自由に変更可能です。
■ CSSでアニメーションを設定
▼ CSSコード
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
display: flex;
overflow: hidden;
}
.scroll-infinity__list {
display: flex;
list-style: none;
padding: 0;
}
.scroll-infinity__list–left {
animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
width: calc(100vw / 6);
}
.scroll-infinity__item > img {
width: 100%;
}
▼ CSSのポイント
-
.scroll-infinity__list--leftで、80秒かけて左方向へスライドするアニメーションを指定しています。 -
animation: ... 0.5s both;の「0.5s」はアニメーションの開始を0.5秒遅らせる指定です。 -
画像のサイズは任意ですが、今回の例では「幅300px × 高さ200px」を基準にしています。
■ Step 02：画像を左から右へ無限ループさせる
前回は右から左へのアニメーションでしたが、今回は左から右へ流れる無限スクロールを実装します。
基本的な構造は同じですが、CSSアニメーションの方向を変更するだけで実現できます。
▼ HTML構造（左から右への無限ループ）
<div class=”scroll-infinity”>
<div class=”scroll-infinity__wrap”>
<ul class=”scroll-infinity__list scroll-infinity__list–right”>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
</ul>
<ul class=”scroll-infinity__list scroll-infinity__list–right”>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
<li class=”scroll-infinity__item”><img src=”sample.png” /></li>
</ul>
</div>
</div>
▼ HTMLのポイント
先ほどと同様に画像を2セット並べる構成ですが、CSSで指定するアニメーションの方向を「右向き」にすることで、左端から右へ流れるようになります。
▼ CSSコード（左から右へスクロール）
@keyframes infinity-scroll-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
.scroll-infinity__list–right {
animation: infinity-scroll-right 80s infinite linear 0.5s both;
}
▼ CSSのポイント
-
@keyframesをinfinity-scroll-rightとして、左から右への移動を定義します。 -
.scroll-infinity__list--rightでアニメーションを指定し、0.5秒後に開始し、80秒かけて1ループします。
✅ 補足
左右のループを切り替える場合は、
HTML側のクラス名（--left or --right）と、CSSのアニメーション名・動作方向を一致させて書き換えるだけでOKです。
▼ CSSのポイント
-
@keyframesをinfinity-scroll-rightとして、左から右への移動を定義します。 -
.scroll-infinity__list--rightでアニメーションを指定し、0.5秒後に開始し、80秒かけて1ループします。
■ Step 03：文字を無限にスクロールさせる
無限スクロールは画像だけでなく、テキストにも応用可能です。
テキストで作る無限ループは、デザイン次第でとてもスタイリッシュな印象を与えることができます。
見出しやアクセントとして活用してみましょう！
▼ HTML構造（テキストの無限スクロール)
<div class=”scroll-infinity”>
<div class=”scroll-infinity__wrap”>
<ul class=”scroll-infinity__list scroll-infinity__list–left”>
<li class=”scroll-infinity__item–text”>css animation scroll infinity</li>
<li class=”scroll-infinity__item–text”>css animation scroll infinity</li>
<li class=”scroll-infinity__item–text”>css animation scroll infinity</li>
</ul>
<ul class=”scroll-infinity__list scroll-infinity__list–left”>
<li class=”scroll-infinity__item–text”>css animation scroll infinity</li>
<li class=”scroll-infinity__item–text”>css animation scroll infinity</li>
<li class=”scroll-infinity__item–text”>css animation scroll infinity</li>
</ul>
</div>
</div>
▼ HTMLのポイント
リストの中に同じ文字を複数回繰り返して入れていますが、表示させたい文字は自由に編集OKです。
装飾を追加して、個性のあるループを作りましょう。
▼ CSSコード（テキストの装飾とサイズ調整）
.scroll-infinity__item–text {
font-family: Comfortaa, cursive;
width: calc(500vw / 3);
font-size: 15rem;
color: #222;
}
▼ CSSのポイント
-
width: calc(500vw / 3)の部分は、文字数やデザインに合わせて調整可能です。
文字が長すぎて切れてしまう場合はvwの数値を増やすと改善できます。 -
フォントやカラー、サイズなど、デザインの自由度が高いのも特徴です。
✅ カスタマイズ例
-
font-size を小さくすれば見出し下に流れる帯風に
-
font-family を変えてブランド感の演出に
-
color や text-shadow で装飾を加えるのもおすすめ
■ Step 04：ホバーで無限ループを一時停止する
画像や文字が無限にスクロールするアニメーションは便利ですが、
ユーザーがマウスカーソルを当てたときに一時停止させたい場合もありますよね。
そんなときは、hover と animation-play-state を使えば簡単に実装できます。
また、<a>タグと組み合わせれば、リンク付きで動きを止める演出も可能です。
▼ CSSコード（ホバーでアニメーション停止）
.scroll-infinity__wrap:hover .scroll-infinity__list–right {
animation-play-state: paused;
}
▼ CSSの解説
-
animation-play-state: paused;を指定することで、アニメーションが一時停止します。 -
:hoverセレクタで、マウスオーバー時のみ一時停止させています。 -
.scroll-infinity__list--leftに対しても同様に指定すれば、左向きループでも適用できます。
まとめ
いかがでしたか？
今回は、画像やテキストが無限にスクロールするCSSアニメーションの作り方をご紹介しました。
シンプルなHTMLとCSSだけで、動きのある印象的なデザインを実現できます。
-
画像を右から左へ／左から右へ無限ループ
-
テキストのスタイリッシュなスクロール
-
ホバー時の一時停止アニメーション など
Webサイトにちょっとした動きを加えるだけで、印象や使いやすさは大きく変わります。
ホームページを作りたい方も、Web制作を始めたばかりの方も、
「何ができるのか？」の引き出しとして、ぜひ参考にしてみてください。
