JavaScript | animate()で画像差し替えアニメーション

2022-03-142022-10-11JavaScript アニメーション サンプル集,JavaScript

JavaScriptのanimate()メゾッドを使って自動的にフェードイン・フェードアウトでフワッと画像を差し替えるアニメーションの実装サンプルを紹介しています。

画像差し替えアニメーション

animate()メゾッドを利用した画像差し替えアニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。

See the Pen CSS Replace images automatically animation by yochans (@yochans) on CodePen.

サンプルでは以下のHTMLを利用しています。

<div class="container">
	<img class="image" src="https://raw.githubusercontent.com/Yousuke777/bg/main/cat1.jpg" />
	<img class="image" src="https://raw.githubusercontent.com/Yousuke777/bg/main/cat2.jpg" />
	<img class="image" src="https://raw.githubusercontent.com/Yousuke777/bg/main/cat3.jpg" />
</div>

画像のあるコンテナ、画像タグには以下のCSSを指定しています。

「position: absolute」を指定して「.container」内に画像が重なるように配置、初期値で「opacity」を「0」にして画像の透過させています。

.container {
	position: relative;
	width: 500px;
	max-width: 100%;
	height: 400px;
}

.image {
	position: absolute;
	width: 100%;
	opacity: 0;
}

imgタグのHTML要素「.image」をquerySelectorAll()で取得、「for of」文でそれぞれにアニメーションを定義しています。

アニメーションのオプションにて遅延（delay）を画像毎に指定、順番に遅らせてアニメーションを開始させています。

let images = document.querySelectorAll(`.image`);

for (const [key, value] of Object.entries(images)) {

	value.animate(
		[
			{
				offset: 0.0,
				opacity: '0'
			},
			{
				offset: 0.1,
				opacity: '1'
			},
			{
				offset: 0.9,
				opacity: '1'
			},
			{
				offset: 1.0,
				opacity: '0'
			}
		],
		{
			duration: 15000,
			delay: key * 5000,
			iterations: Infinity
		}
	);

}

CSSのみでフワッと画像を置き換えるアニメーションは以下のページにて紹介しています。
関連：複数の画像を自動的に差し替えるCSSアニメーション | ONE NOTES