背景をJSで動かす方法について

CSS側の操作

.background-img{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('画像のファイルパス');
}

1. position: fixed; 要素を固定位置に配置する。画面のスクロールに影響を受けず、常に画面の左上に表示される。

2. top: 0; left: 0; 要素の配置位置を画面の左上隅に指定する。

3. width: 100%; height: 100%; 要素の幅と高さを画面全体に広げる。

4. z-index: -1; 要素の重なり順を指定する。-1の値を指定することで、要素を背景に配置し、通常のコンテンツよりも後ろに表示されるようになる。

5. background-size: cover; 背景画像を要素全体に広げる。画像のアスペクト比を保ちつつ、要素にフィットさせる。

6. background-repeat: no-repeat; 背景画像の繰り返し表示を無効にする。画像が要素よりも小さい場合に、単一の画像が繰り返し表示されるのを防ぐもの。

7. background-image: url('画像のファイルパス'); 背景に表示する画像のファイルパスを指定。

JavaScript側の操作

windowのイベントにscroll時の関数を定義。

const backImg = document.querySelector('.background-img')
window.addEventListener('scroll', function() {
	const scrollY = window.scrollY;
	backImg.style.transform = `translateY(-${scrollY * 動かす距離の比率(0~1)}px)`;
});