JavaScript | animate()で背景画像の無限スクロールアニメーション

JavaScript アニメーション サンプル集,JavaScript

JavaScriptのanimate()メゾットを使った使って背景画像を無限スクロールさせるアニメーションの実装サンプルを紹介しています。

アニメーション

animate()メゾットを利用して背景画像の無限スクロールさせるシンプルな動作サンプルとJavaScriptのサンプルコードです。

See the Pen JavaScript | Move diagonally animation with animate by yochans (@yochans) on CodePen.

HTMLには無限スクロールさせたい背景画像のある要素としてdivタグで「.container」を設置しています。

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

「.containerには以下のCSSを指定しています。

「background」プロパティにて背景画像のURLを指定しています。

「repeat-x」を指定することで背景画像は見えない部分がアニメーションによって表示された際に横に並んでいる状態となります。

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

背景画像を移動させるのにCSSでの「background-position」プロパティを変更していますが、JavaScriptのanimate()メゾットの場合は「backgroundPosition」と記述して指定します。

左に向かって移動させるには「-100%」をアニメーション完了位置として指定しています。

オプションに「iterations: Infinity」を指定して無限ループするようにしています。
関連:JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES

document.querySelector(`.container`).animate(
	[
		{ backgroundPosition: '0 0' },
		{ backgroundPosition: '-100% 0' }
	],
	{
		duration: 5000,
		iterations: Infinity
	}
);

CSSアニメーションバージョンも以下のページにて紹介しています。
関連:無限スクロールする背景のCSSアニメーションサンプル | ONE NOTES