CSSだけでローディングアニメーションを実装する方法を記載します。
目次
1.実装例
2.解説
3.カスタマイズ
4.まとめ
1.実装例
いきなりですが、実装例を掲載します。
See the Pen ローディング ロゴ by ハスキーに会いたい (@yfpgqlgd-the-builder) on CodePen.
※右下の「Rerun」で何度も再生できます。
かなりシンプルですが、ローディング画面があるのとないのとでは、印象がだいぶ違いますね。
こうしたアニメーションがあると、ユーザーの興味や関心を惹きつけ、サイト滞在率の延長につながる可能性が高まります。
2.解説
それではCSSでどのように制御しているのか、解説していきます。
背景の動き
まず、横幅と高さいっぱいの白背景を用意します。そしてアニメーションで「fadeOut」を指定して、背景が完全に透明になるまでの時間(1.5秒)を記述します。
ですがこのままだと、白背景がすぐに透過されてしまいますので、2.5秒の遅延を付けます。
ロゴの動き
ロゴも背景の時と同じく、表示時間(2秒)を設定し、@keyframesで「下からロゴを表示してその後消える」の動きを記述します。
また、こちらには0.5秒の遅延を付けています。
これらのコードを記述すれば、ローディングアニメーションが完成します。
3.カスタマイズ
CSSだけで作成しているので、カスタマイズがしやすくなっています。
なので、カスタマイズ例を2点紹介します。
パターン1
See the Pen ローディング ロゴ カスタマイズ by ハスキーに会いたい (@yfpgqlgd-the-builder) on CodePen.
こちらは、背景を変更し、ロゴ部分を画像ではなくテキストを入れてみました。
また、テキストが透明になるまでの動きを上下入れ替えてみました。
パターン2
See the Pen
ローディング ロゴ カスタマイズ02 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
次は少し応用しています。
ロードしている感が増したと思います。気になった方は是非コードをご覧ください。
4.まとめ
javascriptを使用しない分、読み込み速度が早く、開発や保守がしやすいことがメリットになると思います。
逆にデメリットとしては、ページをリロードすると再度ローディングアニメーションが実行されてしまうので、そこの制御はjsを使用せざるを得ないところですね。
ですが、かなり容易に実装でき、カスタマイズ性が高いのでお気に入りのアニメーションです。
それではまた…