【JS&CSS】画像をズームイン＆ふわっと切り替える方法

まず container クラスで画像のサイズを指定し、 overflow: hidden; を設定することで画像ズーム時にはみ出た部分を非表示にします。 img タグにはデフォルトで opacity: 0; を設定しており、最初は画像が非表示になります。 active クラスが付与されると、以下の @keyframes で定義されたアニメーションが5秒かけて実行され、画像がズームインしながらフェードインしていきます。

.container img.active < animation: 5s zoomFadeIn forwards; >@keyframes zoomFadeIn < 0% < opacity: 0; transform: scale(1); >50% < opacity: 1; >100% < opacity: 0; transform: scale(1.2); >>

opacity: 0 から始まり、50%の時点で opacity: 1 になることで、画像がふわっと現れます。
同時に transform: scale(1) から transform: scale(1.2) にすることで画像を1.2倍にまで拡大し、ズームインの効果を与えています。
最後に再び opacity: 0 に戻り、次の画像へスムーズに切り替わるよう設定しています。

JavaScriptでの画像切り替え

setInterval 関数を使うと、決められた時間ごとに特定の関数を呼び出して繰り返し実行することができます。本実装では5秒ごとに imgAppear 関数を呼び出し、 active クラスの除去と付与を繰り返し行うことで画像の切り替えを行っています。

const images = document.querySelectorAll('.container img'); let nextIndex = 1; function imgAppear() < if (nextIndex >= images.length) < nextIndex = 0; >images.forEach(image => < image.classList.remove('active'); >); images[nextIndex].classList.add('active'); nextIndex++; > setInterval(imgAppear, 5000);

最初にすべての img 要素を取得し、画像を配列のように扱います。
nextIndex は次に表示する画像のインデックスを追跡しており、全ての画像を順番にループさせるため、最後の画像が表示された後は最初に戻るように設定されています。
forEach ループで全ての画像から active クラスを削除し、次に表示したい画像にだけ active クラスを付与します。

最後に

今回の方法では、CSSだけでなくJavaScriptも使うことで、画像がふわっと現れ、ズームインして自然に切り替わるスライドショーを実装できました。アニメーションのスピードや画像のズーム率などは状況に合わせて自由に調整でき、CSSの keyframes やJavaScriptの setInterval 関数の基本的な使い方を学べる良い機会でもあるので、ぜひ実際にコードを試してみてください。

📎📎📎📎📎📎📎📎📎📎