無限スクロールする背景のCSSアニメーションサンプル
シームレスな背景画像を使って無限スクロールする背景を作成するCSSアニメーションのサンプルコードです。
背景の無限スクロール
CSSだけで横スクロールアクションゲームのように背景を無限スクロールさせるアニメーションのサンプルコードです。
See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen.
HTMLは背景画像を配置するコンテ用のdivタグを作成しています。
<div class="container"></div>サンプルに使う背景画像には以下のものを作成しました。
背景画像は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;
}
}