CSSでスライドショーっぽいやつを作ってみる

今回はCSSでスライドショーっぽいものを作成してみます。

完成物

こんなやつを作っていきます。

正確にはスライドショーではないです。
矢印をつけて自由に左右にスライドできるものではなく、5秒おきくらいに複数の画像がふわっと表示され続けるというものを作ります。

CSSアニメーションを使って、複数の画像を数秒間フェードイン、フェードアウトさせるという動きを無限ループさせていきます。

HTMLを準備

HTMLで画像を3枚準備します。

    <div id="mainvisual">
      <h1>CSSアニメーションでスライドショーっぽい</h1>
      <ul class="fade">
        <li><img src="img/mountain.jpg" alt="" /></li>
        <li><img src="img/colors.jpg" alt="" /></li>
        <li><img src="img/flower.jpg" alt="" /></li>
      </ul>
    </div>

画像を非表示

最初は3枚の画像を非表示にしておきます。

また、後ほど定義するアニメーションを実行しておきます。
fadeアニメーションを15秒かけて無限ループで実行します。

#mainvisual .fade li {
  width: 90%;
  list-style: none;
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 最初は3枚の画像を非表示にしておく */
  opacity: 0;
  /*
  アニメーションを実行
  fade：下で定義している「@keyframes fade」を実行
  15s：「@keyframes fade」の処理を15秒かけて実行
  infinite：アニメーションの処理を無限に繰り返す
  */
  animation: fade 15s infinite;
}
#mainvisual .fade li img {
  width: 100%;
  height: 720px;
  object-fit: cover;
}

画像の表示を遅延させる

１番目の画像→２番目の画像→３番目の画像と順番に表示していきたいので、5秒ずつ遅延させて実行します。

/*
1枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 0s;」ですぐに実行
*/
#mainvisual .fade li:nth-child(1) {
  animation-delay: 0s;
}
/*
2枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 5s;」で5秒後に実行
*/
#mainvisual .fade li:nth-child(2) {
  animation-delay: 5s;
}
/*
3枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 10s;」で10秒後に実行
*/
#mainvisual .fade li:nth-child(3) {
  animation-delay: 10s;
}

画像のまわりをぼかす

画像がそのままだと少し味気ないので、装飾として画像の周りを少しぼかしていきます。

#mainvisual .fade li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0px 0px 20px 20px #fff;
}

アニメーションを作成する

上の「animation」で15sを指定しているので下記の処理を15秒かけて実行させていきます。

0%の「opacity: 0;」で非表示の状態からスタートし、
15%になるまでの間に少しづつ画像を表示（フェードイン）させる。
そこから30%の時点までは画像を表示させたままの状態を維持し、
45%の時点に向けて画像を非表示（フェードアウト）にする。
そこから100%まで非表示の状態を維持する。

@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}