2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails][HTML,CSS] JQueryを使わず背景画像をアニメーションにする

Last updated at Posted at 2021-02-17

#実装したいこと
2645675c398a8c681074fc97e255733b.gif

このように背景画像がフェードイン、アウトを繰り返すようにCSSを設定していきます。

#HTML

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

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秒にかけて透明から不完全透明にさせることができ、ゆっくりとしたアニメーションを作ることが可能となっております。

#まとめ
視覚的に動的なブラウザの方が、現代的な印象を受けやすいと思いますので、ぜひ導入をお勧めします。
自分好みに手を加えてみてください。
ご覧いただきありがとうございました。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?