やりたいこと
以下のように、画像をフワッと切り替えて、その後、 少し拡大させるイメージスライダーの方法をご紹介します。
HTML
ここでは画像を3枚使っています。 1枚目は最初からactve のクラスを付与しておきます。
<div class="top">
<img src="画像のURL" class="active" />
<img src="画像のURL" />
<img src="画像のURL" />
</div>CSS
ポイントとなるCSSだけ紹介します。
.top{
position: relative;
width: 100%;
height: 100%;
overflow: hidden; /* 親要素からはみ出したものを非表示 */
}
.top img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
opacity: 0; /* 非表示 */
z-index: 10;
transition: opacity 1.2s ease;
}
.top img.active {
opacity: 1; /* クラスactiveが付与されたら表示 */
z-index: 100;
animation: ani 10s; /* アニメーション */
}
@keyframes ani {
100% {
scale: 108%; /* 10sかけて拡大 */
}
}javaScript
10行目： 1秒後にクラスを削除させないと、不自然に切り替わってしまう。
16行目： 画像枚数に応じて数値を変えてください。画像が3枚であれば2
const img = document.querySelectorAll(".top img"); // 画像を取得
let cnt = 1; // カウンターは最初1に設定
function slideImg() {
for (let i = 0; i < img.length; i++) {
if (i == cnt) {
img[cnt].classList.add("active");
} else {
setTimeout(() => { // 1秒後にactiveを削除
img[i].classList.remove("active");
}, 1000);
}
}
cnt++;
if (cnt > 2) cnt = 0; // 画像枚数(3)-1=2
}
setInterval(slideImg, 4000); // 4秒ごとに切り替える参考
【javascript】setIntervalと、それを停止させるclearIntervalの使い方
まとめ
- 表示させる画像にクラスactiveを付与。
- 1秒後にクラスactiveを削除することでなめらかに切り替わる。
- カウンターの設定は画像枚数-1
