CSS3 badge

背景画像を縦方向に無限スクロールさせる［Infinite Scrolling Background］を紹介します。

まずは実際に動いているサンプルをご覧ください。

Infinite Scrolling Background : https://on-ze.com/demo/css3-infinite-scrolling-background/

一見すると jQuery を使っているようですが、実はシンプルな CSS のみで実装しています。

具体的には CSS3 の『translate3d』を利用することになりますね。

HTML の記述

以下、背景部分のHTMLの書き方です。

<body>
...
<div id="window"></div>
</body>

ウィンドウ全体に背景を敷き詰める場合でも、body要素に直接 background を指定するのではなく、背景を描画する専用のボックス要素を用意します。
ここでは仮に <div id="window"></div> 要素を作ります。

CSS の記述

続いては CSS です。
以下、キーフレームの指定も含めたスタイルシートの記述になります。

#window {
background-image:url("bg.svg");
background-position:center center;
background-size:500px 320px;
width:100%;
height:300%;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
	-webkit-animation:infinitescroll 5s linear infinite;
	-moz-animation:infinitescroll 5s linear infinite;
	-ms-animation:infinitescroll 5s linear infinite;
	-o-animation:infinitescroll 5s linear infinite;
	animation:infinitescroll 5s linear infinite;
z-index:0;
}

@-webkit-keyframes infinitescroll {
	0% {-webkit-transform:translate3d(0, 0, 0);}
	100% {-webkit-transform:translate3d(0, -320px, 0);}
}
@-moz-keyframes infinitescroll {
	0% {-moz-transform:translate3d(0, 0, 0);}
	100% {-moz-transform:translate3d(0, -320px, 0);}
}
@-ms-keyframes infinitescroll {
	0% {-ms-transform:translate3d(0, 0, 0);}
	100% {-ms-transform:translate3d(0, -320px, 0);}
}
@-o-keyframes infinitescroll {
	0% {-o-transform:translate3d(0, 0, 0);}
	100% {-o-transform:translate3d(0, -320px, 0);}
}
@keyframes infinitescroll {
	0% {transform:translate3d(0, 0, 0);}
	100% {transform:translate3d(0, -320px, 0);}
}

先にHTMLに記述した <div id="window"></div> 要素には position:fixed; 等を効かせてウィンドウ全体を覆います。

またこのとき、高さは最低でも200%以上に指定します。

そして重要な@keyframesですが、「translate3d」で指定する第２引数には背景で使用する画像の高さを記入します。今回の場合、背景画像の高さは 320px なので transform:translate3d(0, -320px, 0); となっています。

Infinite Scrolling Background : https://on-ze.com/demo/css3-infinite-scrolling-background/

同じ方法で「translate3d」ではなく「background-position」を使う方法もあります。

「background-position」を使いたい場合はキーフレームの箇所を次のように書き換えましょう。

@-webkit-keyframes infinitescroll {
	0% {background-position:0 0;}
	100% {background-position:0 -320px;}
}
@-moz-keyframes infinitescroll {
	0% {background-position:0 0;}
	100% {background-position:0 -320px;}
}
@-ms-keyframes infinitescroll {
	0% {background-position:0 0;}
	100% {background-position:0 -320px;}
}
@-o-keyframes infinitescroll {
	0% {background-position:0 0;}
	100% {background-position:0 -320px;}
}
@keyframes infinitescroll {
	0% {background-position:0 0;}
	100% {background-position:0 -320px;}
}

先ほどと同じようにスクロールさせる距離は背景画像の高さに合わせます。

なお「translate3d」と「background-position」を比較すると、描画は「translate3d」のほうがスムーズです。
ぜひお試しください。