【HTML, CSS】背景画像のアニメーション & 背景画像の固定の仕方…の備忘録

背景画像のアニメーションと固定の方法

背景画像を設定するとき、背景をアニメーションで流しているWEBサイトがあります。
さらに、スクロールしても背景画像が固定されていることもあります。

少しの手間でイケてる感じのアニメーション&固定背景を作ることができます。

今回の記事はその作り方の備忘録です。

ますは完成形

まずはHTMLとCSSの完成形を下に示します。
これはコピペで使えます

HTML

CSS

画像の配置とアニメーションの基本設定

アニメーションが適用される背景画像はHTMLは2~6行目です。
bg-01 ~ bg-04クラスにbackground-imgaeで画像を設定しています(CSSの43~54行目)。
HTMLでは背景画像を4つ連続で書きましょう。

アニメーションの初期設定

このbg-01 ~ bg-04クラスがあるタグにアニメーションのためのbg-animatioinクラスを置きます。
そして、bg-animationクラスによるアニメーションの設定はCSSの24 ~ 26行目に書いてあります。

animation-name: bg-transition;によって、アニメーションの遷移の流れを定義する@keyframes(CSSの67行目)の名前を書きます。
これはあとで説明します。

animation-duration: 4s;によって、アニメーションの画像が1週するまでの時間を設定します。
つまり、4枚の画像が4秒で回るということです。
1枚の画像が表示されている時間ではありません。
4枚の画像が1週するまでの時間です。

animation-iteration-count: infinite;によって、アニメーションを無限に回すようにしています。

背景画像を何秒後に表示するか

CSSの31 ~ 39行目には4枚の画像がアニメーションが1週する中で開始から何秒後に表示するかを指定しています。
bg-01クラスについて書いていないのは、bg-01が最初に表示されるからです。

アニメーションの遷移の仕方を定義する

CSSの67 ~ 73行目には、@keyframesを使って、画像がどう遷移するかを指定しています。

まず、68行目と69行目に注目します。
今回の例では、4枚の画像が4秒で回ります。
4秒で4枚なのだから1秒で1枚、ではありません(下で説明)
その4秒の内、0%から15%の時間にopacityが0から1に変わると言う意味です。

そして70行目から71行目にかけてに注目します。
4秒の25%から30%にかけてopacityが1から0に遷移します。

この@keyframesの設定はbg-animationクラスにかかっています。
4枚の画像すべてがこの@keyframesが設定されます。

@keyframesによって背景画像がどう変化するのか

ここで、設定した@keyframesについて確認します。
@keyframesにつけた固有の名前である「bg-transition」は、CSSの24行目にあるように、4枚の画像すべてに適用されています。

以下の図をご覧ください。
@keygramesを詳しくみる
青い箇所は画像が表示されている領域です。

全体の4秒の内の0%~10%ではopacityが0が1に変化する領域です。
そして、15%~30%ではopacityが1から0に変化する領域です。

ちょうどこのopacityが変化するときにふたつの画像が被って見えます

2枚目の画像は1枚目より1秒遅れて表示されます。
ここで注意なのは、次の画像が何秒遅れて表示されるかが重要です。
4枚が4秒で表示されるのだから1枚は1秒表示される、と考えてはなりません。

ここではCSSの31行目で、2枚目の画像を1枚目よりも1秒遅れて表示させるように設定しています。
32行目では、3枚目の画像が2秒遅れて表示されるように設定しています。

そして、背景画像が遷移するときに、つまりopacityが変化するときにちょっとかぶせたいので、4枚を4秒で均等に表示するためにどれくらい時間被せるのか?を計算して@keyframesを設定します。

あとはこの繰り返しです。
3枚目と4枚目の画像も同様に考えます。

背景画像の固定

背景画像の固定で重要なのは、CSSの58行目にあるbg-fixedクラスのbackground-attachment: fixed;です。
これを設定するだけです。

背景画像なので、background-size: cover;とかも一緒につけています。

まとめ

はじめてやると結構頭を使うと思います。
紙に書いてゆっくり考えてみましょう。

なんだかよくわからなかったら、上記のHTMLとCSSをコピペして、背景画像を4枚用意して試してみましょう。
私はこれはテンプレートとして使っています。