動く背景を設定する場合、多くは動画やGIFを使うと思いますが、数枚の画像でも十分に実現可能です。
今回はそのやり方を残しておきます。
使う画像はこちら
今回はぱくたそさんからそれっぽいのを数枚拝借しました。
この3枚を使って設定したいと思います。
こうやって実装する
やってることは簡単で、
- 画像を用意
- animationプロパティで動きを指定
これだけです。
結果としては、こうなります。
See the Pen 背景アニメーション by 海辺のカラス (@seaside-crow) on CodePen.
ちょっと解説
どうしても背景をアニメ―ションにしたいサイトがあって、悩んだ末にこのコードでなんとか実装できました。
iOSでbackground-size:cover;とbackground-attachment: fixed;を使うと両方無効化されるとかでちゃんと機能しなかったので、上記のようなコードになっています。
参考記事はbackground:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう
bodyタグ使ってるのでスタイルシートにそのまま書くとすべての背景に反映されます。
部分的に使いたいなら.page-id-XXで指定するか、styleタグを使ってページに直接書く。
Cocoonを使っているなら、ページ編集画面下にある「カスタムCSS」に書けば使えます。
使いどころはわりとある？
サイトを作ってると、「動きを入れたサイトにしてほしい」って割と言われるので、背景に動きを実装してみました。
GIFファイルを用意すれば早いんでしょうが、こっちだと雰囲気や気分に合わせて変えやすいってのはありますので、よろしければお使いください。
以上、画像でも動く背景ができましたよって話でした。
