【JavaScript】背景画像の無限スクロール

CSS版のリンク

HTML

<section id="summary">
</section><!-- /summary -->

CSS

#summary {
    background: url("../images/bg.gif") repeat;    
}

JavaScript

const bgImg = document.getElementById('summary'); //親要素取得
let positionX = 0; // X方向の位置初期値
let positionY = 0; // Y方向の位置初期値
const speed = 1; // スクロールの速度

const scrollBackground = () => {

  positionX -= speed; // 左方向にスクロールするため減算
  positionY += speed; // 下方向にスクロールするため加算
  bgImg.style.backgroundPosition = `${positionX}px ${positionY}px`;
  requestAnimationFrame(scrollBackground); // 毎秒60回アニメーションを呼び出し更新
}

scrollBackground();

解説

①動かしたい画像の親要素を取得
②positionXとYでXY軸の起点を0
※ウインドウ左上に設定
③スピード数は「1」で設定
※1pxのこと

④
4-1： scrollBackground関数を定義
※スクロールするため X軸に-1px  Y軸に+1px 減算と加算をする


4-2： scrollBackground関数　｛
スクロールするため X軸に-1px  Y軸に+1px 減算と加算をする
※加算減算して左下にスクロール
背景画像にbackgroundPositionのスタイルを文字列テンプレートで追加
※translateだと要素ごと動いてしまう
ここまでだと1pxだけしか動かない

4-3： requestAnimationFrameメソッドで毎秒60回scrollBackground関数に渡される。
つまり、背景画像の位置は毎秒約60回更新され、結果として滑らかな動きに見える。