【コピペOK】CSSとjQueryでローディング画面の後に背景色を伸ばす!

(この記事は2022年6月4日に投稿されました。)

複数のアニメーションを組み合わせると、よりおしゃれなアニメーション変身することができます。

例えば、今回紹介する「ローディング画面 + 背景色を伸ばす」のアニメーションはTOPページを表示する前のアニメーションとして使用することができます。

複数のアニメーションを組み合わせるから作成するのが難しいのでは?

と思うかもしれませんが、アニメーション単位で1つずつ解説していますので、勉強したい方は自分のペースで理解を深めることができます。

また、コピペすると使用できるようになっていますので、すぐに使ってみたい方はこちらの記事をご参考ください。

今回はCSSとjQueryでローディング画面の後に背景を伸ばす方法について紹介していきます。

この記事はこんな方におすすめ
・サイトにおしゃれなアニメーションをつけたい人




ローディング画面の後に背景を伸ばす方法

ローディング画面の後に背景を伸ばすには、下記のような手順で作成していきます。

STEP.1
ローディングの画面を表示する
パーセンテージのカウントアップとプログレスバーでローディングの画面を作成します。
STEP.2
背景色を伸ばすアニメーションを表示する
背景色が伸びるアニメーションを作成します。
STEP.3
ローディングが完了した後に背景色を伸ばす
作成したローディングの画面と背景色を伸ばすアニメーションを組み合わせます。

それぞれ、手順を追ってご紹介していきます。

ローディングの画面を表示する

まずは、ローディングの画面を表示していきます。

HMTLファイルとCSSファイルとJSファイルに下記のコードをコピペすることで、ローディング画面を表示することができます。

ローディング画面の詳しい作成方法は別の記事でご紹介してますので、詳しく知りたい場合は下記の記事をご参考ください。

⚫︎ example.html

⚫︎ style.css

⚫︎ index.js

⚫︎ 実行結果

ローディングの画面を表示した結果

パーセンテージがカウントアップされていると共にプログレスバーも伸びています。

Sossy

プログレスバーを表示する方法はいくつかありますが、今回は「Progressbar.js」というライブラリを使用してローディング画面を作成しています。

背景色を伸ばすアニメーションを表示する

続いて、背景色を伸ばすアニメーションを表示する方法です。

HMTLファイルとCSSファイルとJSファイルに下記のコードをコピペすることで、背景色を伸ばすアニメーションを表示することができます。

こちらのアニメーションの作成方法も別の記事でご紹介してますので、詳しく知りたい場合は下記の記事をご参考ください。

⚫︎ example.html

⚫︎ style.css

⚫︎ index.js

⚫︎ 実行結果

背景色を伸ばすアニメーションを表示した結果

2秒後に黄緑色のの上から下に伸びてページの内容が表示されています。

ローディングが完了した後に背景色を伸ばす

最後にローディングが完了した後に背景色を伸ばしていきます。

先ほど作成したローディング画面と背景色を伸ばすアニメーションを組み合わせていきます。

そのため、HMTLファイルとCSSファイルとJSファイルに下記のコードをコピペします。

⚫︎ example.html

⚫︎ style.css

⚫︎ index.js

⚫︎ 実行結果

ローディングが完了した後に背景色を伸ばした結果

ローディングが100%になった後、背景色が伸びての文字列が表示されています。

実際のサイトでローディング画面の後に背景を伸ばして表示してみた

実際のサイトでローディング画面の後に背景を伸ばして表示してみましたのでご紹介します。

まず、header.phpの<body>の下に下記のコードを追記します。

⚫︎ header.php

そして、footer.phpの</body>の上に下記のコードを追記します。

⚫︎ footer.php

⚫︎ 実行結果

実際のサイトでローディング画面の後に背景を伸ばして表示した結果

サイトをクリックするとローディング画面が表示され、パーセンテージが100%に達すると背景色が伸びてTOPページが表示されています。

TOPページのみローディング画面の後に背景を伸ばして表示する場合

先ほどのコードで、実際のサイトにローディング画面の後に背景を伸ばして表示しましたが、ページを切り替える度にアニメーションが実行されてしまいます。

そのため、TOPページのみローディング画面の後に背景を伸ばして表示するよう設定します。

「ローディング画面 + 背景を伸ばし」のアニメーションをTOPページだけにするには先ほどheader.phpに追記したコードを下記のように変更します。

⚫︎ header.php

⚫︎ 実行結果

TOPページのみローディング画面の後に背景を伸ばして表示した結果

TOPページを表示すると、ローディングのアニメーションが表示されますが、他のページを開くと、ローディングのアニメーションが表示されていません。

まとめ

⚫︎ ローディング画面の後に背景を伸ばすには下記のような手順で作成する。
・ ローディング画面を表示する
・ 背景色を伸ばすアニメーションを表示する
・ ローディングが完了した後に背景色を伸ばす

⚫︎ TOPページのみローディング画面の後に背景を伸ばして表示する場合は、is_front_page()を使用する
(if文を使って、TOPページを表示する場合のみ実行させる)

コメントを残す

メールアドレスが公開されることはありません。