このように背景画像がフェードイン、アウトを繰り返すようにCSSを設定していきます。
#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>
使用する画像の数だけ子要素を用意しましょう。
私の場合4枚の画像を使うため、今回は、上記のように4枚分子要素を用意します。
#CSS
.box {
position : relative;
width : 100vw;
height : 100vh;
}
.box .bgImg {
position : absolute;
width : 100%;
height : 100%;
top : 0;
left : 0;
bottom : 0;
right : 0;
opacity : 0;
background-size: cover;
animation : bgAnime 20s infinite; /* 4画像 × 各5s = 20s */
}
/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
}
.box .src2 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 5s;
}
.box .src3 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 10s;
}
.box .src4 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 15s;
}
@keyframes bgAnime {
0% { opacity: 0; }
5% { opacity: 1; }
25% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}
以上の記述で完了です。
#自分なりに手を加えたい方へ
自分好みにアレンジを加えたい方がいらっしゃるかもしれませんので、どこを変更すれば変えられるかを、2つほど例を上げておきます。
#1.画像枚数を変えたい
画像を4枚ではなく6枚にしたいときの変更場所です。
animation : bgAnime 20s infinite;
↓
animation : bgAnime 30s infinite;
.box .src1 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
}
.box .src2 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 5s;
}
.box .src3 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 10s;
}
.box .src4 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 15s;
/*追記*/
}
.box .src5 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 20s;
}
.box .src6 {
background-image : url('画像のパス'); /* 背景の画像を指定 */
animation-delay : 25s;
}
主に秒数の変更と画像を追加するだけですね。
#2.画像をゆっくり変化させたい
@keyframes bgAnime {
0% { opacity: 0; }
5% { opacity: 1; } ←こちらを消去する
25% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}
解説しますと、今回の場合、この0%〜100%という数字は
「20秒間における内訳」を表したものです。
また、opacityは、透明度を指定するものですので、0だと透明、1で完全不透明となります。
今回は4枚の画像のアニメーションを20秒で流れるよう設定しておりますので、1枚あたり5秒間。つまり、20秒の25%部分である約5秒間を境にフェードインとフェードアウトを設定すべきです。
そして2枚目以降にanimation-delayを5秒毎にかけているので、構造としては、1枚の画像が完全不透明となっている間は、他の画像は全て透明となっているため、アニメーションが出来上がっています。
ですので、5%部分を取り除くことで、0%から25%、つまり0秒から5秒にかけて透明から不完全透明にさせることができ、ゆっくりとしたアニメーションを作ることが可能となっております。
#まとめ
視覚的に動的なブラウザの方が、現代的な印象を受けやすいと思いますので、ぜひ導入をお勧めします。
自分好みに手を加えてみてください。
ご覧いただきありがとうございました。