CSSで背景画像の入れ替え

そんなこと本当にできるの？

こんにちは、AKデザインの円盤です。

メインビジュアルをjqueryのスライダー埋め込んで表現するのが一般的になってきましたが、そろそろお客さんにも飽きられてきたのではないか？と思いますよね。

作ってる方はswiperかsliderpro入れるだけでさっと出来て楽なんですが、ちょっと他のこともやってみたい！と思うのは作る側の欲というかクリエイティブ魂に火がつくというか地獄の始まりというか…ｗ

というわけで背景画像入れ替えてその背景がパララックスで、そんなん出来るのかな？とググったらソースの公開を飛び越えて、自動で作っちゃうよ！というサイトが出てきて泣きそうになった次第。

https://webparts.cman.jp/box/bgfade/

というわけでこちらのサイト。QRコード作成でお世話になってることが多いんですが。描画ペースやらも調整できてしまうなんて！

HTML

<div class="box">
  <div class="bgImg src1"></div>
  <div class="bgImg src2"></div>
  <div class="bgImg src3"></div>
  <div class="bgImg src4"></div>
  <div class="boxString">フェード<br>切り替え</div>
</div>

CSS

<style type="text/css">
/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  max-width  : 400px;
  height     : 250px;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(./spring.jpg);   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url(./summer.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url(./autumn.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url(./winter.jpg);   /* 背景の画像を指定 */
  animation-delay  : 15s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.box .boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  background : rgba(0, 127, 255, 0.7);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}
</style>