【HTML/CSS】CSSのみで画像切り替えのアニメーションを実装する方法

プログラミング初心者の勉強ブログ #130

ここ最近何回か連続でCSSでの画像切り替えアニメーションについて質問を受けたので、改めて記事にしてみる。JS使わなくてもCSSアニメーションのみである程度実装できるのでその方法をまとめる。以前記事にしたような気もするが、CSS系の記事は結構読まれる傾向にあるのでもう一度書こうと思う。

 

目次

[toc]

 

画像の表示切り替えをCSSアニメーションのみで実装する

画像切り替えアニメーション

イメージは上のgifのようにふわっと画像を切り替えるようなもの。内容としてはkeyframesで作成したアニメーションをCSSアニメーションプロパティでずらして適用させる感じ。

 

実装の流れ

実装の流れを簡単に説明すると、

  1. HTMLのimgタグで画像をコーディング
  2. 最初に表示させる画像以外は、あらかじめ全てCSSで「opacity: 0;」にする
  3. CSSのkeyframesで、opacityを「1→0」、「0→1」に変化させるアニメーションを作る
  4. CSSのanimationプロパティで、3で作成したkeyframesをタイミングよく設定する

このような流れ。JS使わないと画像の切り替えアニメーションはできないのかな、と当時は思っていたりしたが、そんなことはなかった。

 

※opacityとは、透明度のことを表す。0だと完全に透明になって表示されなくなる。

※keyframesを使うと、CSSでアニメーションを作成できる。下記コード参照。

 

 

 

 

実際のコード

gifでは2枚の画像の切り替えのみ写っているが、本来は4まいの画像を切り替えて表示させている。

実際のサイトurl:https://gslab0707.bob-pop.com/cheese_academy/

この実装のコードを載せていく。(リンクが切れてしまっていたらすみません。)

 

※keyframesのコード、画像に当てたcssのコード、HTMLのコードと3つに分けて掲載。

 

keyframes部分のcss

/* keyframes */
@keyframes changeMainImage {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0.3;
  }
  33% {
    opacity: 0.1;
  }
  35% {
    opacity: 0;
  }
}
@keyframes changeMainImageLast {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

 

keyframesではopacityの操作のみ。特に難しい設定はない。強いて言えば透明度の変化のタイミングを自分で微調整する点が難しい。僕の場合はある程度のアニメーションで良しとして行なっているため、プロからしてみれば甘いとか言われそう。

 

 

画像に当てているcss

.main {
  position: relative;
  overflow: hidden;
  height: 100vh;
  box-sizing: border-box;
  font-size: 0 !important;
  line-height: 0;
}
.main__img {
  display: block;
  margin: auto;
  font-size: 0 !important;
  line-height: 0;
  display: block;
}
.main__img.no1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  opacity: 0;

  // アニメーションプロパティ
  animation-name: changeMainImage;
  animation-duration: 28s;
  animation-iteration-count: infinite;
}
.main__img.no2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;

  // アニメーションプロパティ
  // 2枚目以降はanimation-delayを設定して
 // アニメーション開始タイミングを遅らせる
  animation-name: changeMainImage;
  animation-delay: 6.5s;
  animation-duration: 28s;
  animation-iteration-count: infinite;
}
.main__img.no3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;

 // アニメーションプロパティ
  animation-name: changeMainImage;
  animation-delay: 13s;
  animation-duration: 28s;
  animation-iteration-count: infinite;
}
.main__img.no4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;

  // アニメーションプロパティ
  // ラストの画像はchangeMainImageLastという他と違うアニメーション
  // 表示をいい感じにするために
  // ブラウザでタイミングを見ながら微調整して作成したため
  animation-name: changeMainImageLast;
  animation-delay: 19.5s;
  animation-duration: 28s;
  animation-iteration-count: infinite;
}

 

とにかくアニメーションを当てるタイミングをずらす、それだけ。keyframesと同様に微調整が難しいポイント。

 

画像部分のHTML

<main class="main">
  <img class="main__img no1" src="./img/mainbg01.jpg" alt="mainbg01">
  <img class="main__img no2" src="./img/mainbg02.jpg" alt="mainbg02">
  <img class="main__img no3" src="./img/mainbg03.jpg" alt="mainbg03">
  <img class="main__img no4" src="./img/mainbg04.jpg" alt="mainbg04">
  <div class="main__cnt main-cnt">
    <h2 class="main-cnt__title" data-scroll="addHeight once">セカイを変えるチーズを作ろう</h2>
    <p class="main-cnt__subTitle" data-scroll="addHeight once">チーズ職人養成学校「チーズアカデミーTOKYO」</p>
  </div>
</main>

 

 

まとめ

僕のブログの中の記事で結構読まれているのが、

【JavaScript】とても簡単なハンバーガーメニューの作り方をわかりやすく解説

とか

【画像アップロード】file_fieldデザイン変更+画像選択時にプレビュー表示する方法

とかだ。どちらもWebサイトの見た目に関係したCSSやJSの実装内容のもの。どうやらここら辺の関係はアクセスされるらしい。

確かにどちらも実装の手間だけでなく、blog用に資料を作成したりと投稿に手間をかけているものである。SEOキーワードとかあまり考えて投稿していないが、もしかしたら競合がいなかったからかもしれない。ただ、なんとなく思うのが、どちらも調べていてピンポイントな回答をしてくれる記事がなかったことだ。だからこそアクセスが伸びているのかもしれない。

「とても簡単なハンバーガーメニュー の作り方をわかりやすく解説」のタイトルはなんの根拠もなく「わかりやすく」とかつけているので、自分の中では大げさでタイトル命名をためらった覚えがある。けどそんくらいでちょうどいいのかもしれんなと。

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA