HTML・CSS

【JavaScript使わない】CSSのみで画像がふわっと切り替わるシンプルなスライドショー

人を大切にしていると自分も大切にされる

なるべくJS使わずCSSだけで実装したいyukipanです。
今の時代、ただ画像をふわっと切り替えるだけなら、JS使わなくてもCSSたけで実装できるんですね〜。ステキ。画像だけふわっと切り替わるバージョンと、背景画像で切り替わるバージョンを作ってみました。
サンプルページも作ってみたので参考にどうぞ〜。

画像だけふわっと切り替えバージョン

サンプルページ

画像だけでふわっと切り替わります。

HTML

<div class="slideBox">
  <img class="item1" src="assets/images/img1.jpg" alt="">
  <img class="item1" src="assets/images/img2.jpg" alt="">
  <img class="item1" src="assets/images/img3.jpg" alt="">
</div>

スライドさせたい画像srcを書く。

CSS

.slideBox {
  height: 500px;
  overflow: hidden;
  position: relative;
}

/* imgのみ */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item1:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

.slideBoxで高さを記載しているので、好きな高さに調整してください。

画像3枚を10秒で切り替えするため、全部で30秒かかる。なので「animation: anime 30s 0s infinite;」でループするanimationを書く。2枚目と3枚目がそれぞれ10秒後、20秒後にanimationするように調整。
速度を速くしたかったり、画像の枚数を増やしたかったら、上記の秒数を調整すると良いです。

ふわっと感は@keyframesで調整できます。ここは好みな気がするのでいろいろ試してみるとおもしろいかも。

スライド画像4枚の場合

枚数を増やす場合は、アニメーションの時間やタイミングを変更する。

HTML

<div class="slideBox">
<img class="item1" src="assets/images/img1.jpg" alt="">
<img class="item1" src="assets/images/img2.jpg" alt="">
<img class="item1" src="assets/images/img3.jpg" alt="">
<img class="item1" src="assets/images/img4.jpg" alt="">
</div>

CSS

.slideBox {
  height: 500px;
  overflow: hidden;
  position: relative;
}

/* imgのみ */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 40s 0s infinite;
  animation: anime 40s 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item1:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}

.item1:nth-of-type(4) {
  -webkit-animation-delay: 30s;
  animation-delay: 30s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

文字を上に表示するバージョン

背景画像の上にロゴやテキストが置いてある、サイトのトップページによくあるやーつ。

HTML

<div class="slideBox">
  <p class="title">cssのみでつくったスライド</p>
  <div class="item2" style="background-image: url(./assets/images/img1.jpg)"></div>
  <div class="item2" style="background-image: url(./assets/images/img2.jpg)"></div>
  <div class="item2" style="background-image: url(./assets/images/img3.jpg)"></div>
</div>

ホントはCSSにbackground-image書いたほうがいいんだけど、画像差し替えたい時にめんどくさいからHTMLにstyleで書いてます。

CSS

.slideBox {
  height: 500px;
  overflow: hidden;
  position: relative;
}

/* テキストがあるバージョン */
.title {
  font-size: 32px;
  color: #fff;
  z-index: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.item2 {
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.item2:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item2:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

.titleでテキストが真ん中に表示されるようになってます。上に乗せる文字数や、ロゴなどの画像にする際は調整してください。
上に乗せるものによって変わるので、レスポンシブ対応のCSSにしてません。とりあえずleft: 50%;にしてます。

まとめ・参考サイト

HTMLとCSSをコピペしたらすぐ使えるようにコードを記載しているので、お好きにコピペして、そのまま使ってもいいですし、自分が使いやすいように改造してみてください。

下記サイトを参考にさせていただきました。ありがとうございます。
参考サイトはズームするスライドショーでした。
私はズームは必要なかったのでズーム機能は省きましたが、ズームさせたい方は参考になると思います。

参考サイト：cssだけでズームしながらふわっと表示が切り替わるスライドショーを作る

ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。