HOME>ブログ>CSS>CSSアニメーションでフェードのスライドショーを作ろう！

公開日時：2022.08.04

CSSアニメーションでフェードのスライドショーを作ろう！

アイキャッチ

こんにちは！
冷房が足に直撃で足が冷えきっているGlobal Web Designの福田です(笑)

前回Swiperというスライドショーをご紹介しましたが(記事はこちら)、今回はJavaScriptを使わずに、CSSアニメーションでフェイドするスライドショーをご紹介していきます！

CSSのみで出来るので

「JavaScriptが難しい…」

とお思いの方は参考にしてみてください！

土台づくり

まずはHTML、CSSからコーディングしていきます。

<div class="img-box">
  <div></div>
  <div></div>
  <div></div>
</div>
.img-box{
  width: 100%;
  height: 46vw;
  overflow: hidden;
  position: relative;
}
.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46vw;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}
/* 1枚目のスライド */
.img-box>div:first-of-type{
  background-image: url(../img/img.jpg);
}

/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
  background-image: url(../img/img2.jpg);
}

/* 3枚目のスライド */
.img-box>div:last-of-type{
  background-image: url(../img/img3.jpg);
}

今回はフェイドで表示させる部分は「background-image」で指定しました。
写真が少しズームアップしてから、次の写真がフェードで表示するようにしたいので、ズームアップしたときに要素から画像がはみ出さないように、「img-box」に「overflow: hidden;」をかけてはみ出した部分を非表示にしています。

親要素の「img-box」に「position: relative;」を書いて、背景画像は同じ位置に来るように「position: absolute;」「 top: 0;」「 left: 0;」を書いています。

ブラウザで見ると

3枚目の背景画像が1番上に表示されています。

アニメーションをつける

下準備ができたら「animation」を使いフェードを実装していきます。

.img-box{
  width: 100%;
  height: 46vw;
  overflow: hidden;
  position: relative;
}
.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46vw;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  /* 追記 */
  opacity: 0;
  animation-name: fade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
    transform: scale(1.2);
  }
  100%{
    opacity: 0;
    z-index: 0;
  }
}
/* 1枚目のスライド */
.img-box>div:first-of-type{
  background-image: url(../img/img.jpg);
}

/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
  background-image: url(../img/img2.jpg);
}

/* 3枚目のスライド */
.img-box>div:last-of-type{
  background-image: url(../img/img3.jpg);
}

CSSで「animation」の指定をしました。

「opacity: 0;」で画像を透明にして見えなくしています。
次に「animation-name: fade;」としてアニメーションの名前を「fade」にしました。
「animation-duration: 12s;」でアニメーションの時間を12秒としました。
「animation-iteration-count: infinite;」でアニメーションを無限にループさせています。

「@keyframes fade」の中身は0%〜20%にかけて「opacity: 0;」〜「opacity: 1;」に不透明にして、20%〜80%で背景画像を「transform: scale(1.2);」拡大しながら、次の写真が見るように「z-index: 0;」で1番上の写真を下に潜りこませ、「opacity: 0;」でまた透明にしています。

ブラウザで見ると

画像がすべて同じタイミングで動いています。

animation-delayで2,3枚目をずらす

アニメーションができたので、「animation-delay」を使って表示させる画像をずらしていきます。
全体のアニメーション時間が12秒なので、4秒間経ったあとに次の写真が出るように設定していきます。

.img-box{
  width: 100%;
  height: 46vw;
  overflow: hidden;
  position: relative;
}
.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46vw;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
    transform: scale(1.2);
  }
  100%{
    opacity: 0;
    z-index: 0;
  }
}
/* 1枚目のスライド */
.img-box>div:first-of-type{
  background-image: url(../img/img.jpg);
}

/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
  background-image: url(../img/img2.jpg);
  /* 追記 */
  animation-delay: 4s;
}

/* 3枚目のスライド */
.img-box>div:last-of-type{
  background-image: url(../img/img3.jpg);
  /* 追記 */
  animation-delay: 8s;
}

2枚目のスライドは「animation-delay: 4s;」で4秒経ったあとにアニメーションがスタートし、「3枚目のスライド」は「animation-delay: 8s;」で8秒経ったあとにアニメーションがスタートするので、画像が重なることなくきれいにフェードしてくれます。

完成はこちら！

See the Pen フェード by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.

まとめ

いかがでしたでしょうか？

今回はCSSアニメーションでフェイドするスライドショーをご紹介しました！

CSSアニメーションは使い慣れるととても便利ですので、フェイフェイドするスライドをご自身で実装してみて、CSSアニメーションになれるのが良いと思います！

Webサイトのトップページにフェイドするスライドショーは使えるのでぜひ実装してみてください！

上矢印 Page Top