画像がゆっくりズームしながら切り替わっていくJavaScriptです。

定番の横スライドとはまた違った雰囲気が出ます。
今回はJavaScriptで画像の切替を設定、
CSSで切り替わる際のアニメーションを設定することで実装しています。

デモページは、こちら

↓以下が実際のソースサンプルです。

▼HTML

<div class="zoomandchange">
    <img src="画像1.jpg" class="active" alt="画像1">
    <img src="画像2.jpg" alt="画像2">
    <img src="画像3.jpg" alt="画像3">
    <img src="画像4.jpg" alt="画像4">
    <img src="画像5.jpg" alt="画像5">
</div>

▼JavaScript

const allimage = document.querySelectorAll('.zoomandchange img');
let nextIndex = 1;

function imgAppear() {
    if (nextIndex >= allimage.length) {
        nextIndex = 0;
    }

    allimage.forEach(image => {
        image.classList.remove('active');
    });

    allimage[nextIndex].classList.add('active');
    nextIndex++;
}

setInterval(imgAppear, 5000);

▼CSS

.zoomandchange {
    position: relative;
    width: 600px;
    /* ←任意の画像サイズ横 */
    height: 450px;
    /* ←任意の画像サイズ縦 */
    overflow: hidden;
    margin: 0 auto;
}

.zoomandchange img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.zoomandchange img.active {
    animation: 5s zoomFadeIn forwards;
}

/* 画像がゆっくりズームしながら表れ消えていくアニメーションの設定 */

@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

今回、参考にさせていただいたのは、
『【JS&CSS】画像をズームイン＆ふわっと切り替える方法 – ノベブロ』さんです。
ありがとうございます。