無限スクロールする背景のCSSアニメーションサンプル

2021-06-30CSS,CSS アニメーション サンプル集

無限スクロールする背景のCSSアニメーション

シームレスな背景画像を使って無限スクロールする背景を作成するCSSアニメーションのサンプルコードです。

背景の無限スクロール

CSSだけで横スクロールアクションゲームのように背景を無限スクロールさせるアニメーションのサンプルコードです。

See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen.

HTMLは背景画像を配置するコンテ用のdivタグを作成しています。

<div class="container"></div>

サンプルに使う背景画像には以下のものを作成しました。

sample-bg.png (1333×889)

背景画像はCSSのbackground-imageのurl()で指定、今回は横スクロールですのでrepeat-xも指定しています。

background-sizeでサイズを調整する際、シームレスな画像ですが50%であったり25%などを指定しないと切り替わる際にズレが生じます。

サンプルではレスポンシブに対応させる為、高さをvwにて指定しています。
それに合わせて、画像が丁度収まるようにコンテナの高さも調節しています。

コンテナの高さを優先して決める場合は、background-sizeであわせて、位置ずれをkeyframesで指定しているbackground-positionの(-100%の部分)を調節した方が手軽かもしれません。

.container {
	width: 100%;
	height: 32.6vw;
	background: url('https://raw.githubusercontent.com/Yousuke777/bg/main/sample-bg.png') repeat-x;
	background-size: 50%;
	animation: scroll-anim 5s linear infinite;
}

@keyframes scroll-anim {
	100% {
		background-position: -100% 0;
	}
}

多重背景の無限スクロール

背景画像を地面&木、山、雲に分けて作成、立体的になるように速度を変えて多重にスクロールさせてみました。

See the Pen CSS | Infinite scrolling of background image by yochans (@yochans) on CodePen.

HTMLは背景画像を配置するコンテ用のdivタグを作成しています。

<div class="container"></div>

サンプルに使う背景画像には以下のものを作成しました。

sample-bg-01.png (1333×889)
sample-bg-02.png (1333×889)
sample-bg-03.png (1333×889)

雲の影を入れ忘れましたが、まあ雑過ぎて需要なんてないでしょうしok。

今回は3枚重ねですので疑似要素のbiforeとafterを使っています。
4枚以上重ねる場合は子要素を作成します。

疑似要素にはposition: absoluteで親要素の左上の0,0(省略)に配置します。

疑似要素の表示深度は、奥から本体(雲)、bifore(山)、after(地面&木)の順になりますが、必要があればz-indexで調節します。

それぞれのanimationの実行時間をズラして、それっぽくします。
基本的には奥のものほど、長い時間を指定します。

.container {
	width: 100%;
	height: 32.6vw;
	background: url('https://raw.githubusercontent.com/Yousuke777/bg/main/sample-bg-03.png') repeat-x;
	background-size: 50%;
	animation: scroll-anim 15s linear infinite;
}

.container::before {
	content: "";
	width: 100%;
	height: 32.6vw;
	position: absolute;
	background: url('https://raw.githubusercontent.com/Yousuke777/bg/main/sample-bg-02.png') repeat-x;
	background-size: 50%;
	animation: scroll-anim 10s linear infinite;
}

.container::after {
	content: "";
	width: 100%;
	height: 32.6vw;
	position: absolute;
	background: url('https://raw.githubusercontent.com/Yousuke777/bg/main/sample-bg-01.png') repeat-x;
	background-size: 50%;
	animation: scroll-anim 5s linear infinite;
}


@keyframes scroll-anim {
	100% {
		background-position: -100% 0;
	}
}