CSSだけでキービジュアルのスライドショーの作る方法

Javascriptを使わずに、CSSのアニメーションを使ってキービジュアルのスライドショーの作り方を説明します。

特徴

• レスポンシブ対応
• フェードイン&フェードアウト切り替え
• Javascript未使用
• 画像制限なし

デモ

See the Pen
JSなしでフェードイン・フェードアウト by kura (@kuranopen)
on CodePen.

デモでは3枚の画像を5秒間隔ループ切り替えています。

HTML

<div class="hero">
<div class="slider">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

• スライドする画像の数だけ<div class="image"></div>を挿入

CSS

/* スライダー全体 */
.slider{
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-color: #000;
}

/* スライダー画像 */
.slider .image{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/*
  ①スライド画像
  表示する画像を定義
*/
.slider .image:nth-of-type(1){
  background-image: url(https://picsum.photos/id/237/960/540);
}
.slider .image:nth-of-type(2){
  animation-delay: 5s;
  background-image: url(https://picsum.photos/id/238/960/540);
}
.slider .image:nth-of-type(3){
  animation-delay: 10s;
  background-image: url(https://picsum.photos/id/239/960/540);
}

/*
  ②アニメーション設定
  animation-durationのみ変更
*/
.slider .image{
  animation-name: anime;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-duration: 15s;  /* ①で設定したanimation-delayを合計を挿入 */
}

/* アニメーション定義 */
@keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

変更箇所は①と②だけです。

• ①　表示する画像を定義します。
• ①　animation-delayで切り替え間隔を指定します。
• ①　.image:nth-of-typはHTMLの.imageの順番を指定します。例えば.image:nth-of-type(3)は3番目の.imageです
• ②　animation-durationに①で定義したanimation-delayの合計を指定します。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選