ローディングアニメーションのロゴがページを読み込んだ後でも消えません

ローディングアニメーションを入れたいと思い、調べて、以下のサイトに辿り着いて、
サイトの一番下から２番目にある、「**跳ねるうさぎちゃん**」とういタイトルのローディングアニメーションのC◆DEOENで動く、HTML,css,jsの全てコピーして、起動してみたのですが、

サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが、その他のロゴ（ウサギや卵、横線）のロゴ等が
**消えずに動き続けてしまいます。**

このロゴもちゃんと消えるようにしたいです。

多分javascriptの部分だと思うのですが、どう書いたらよいでしょうか？
回答よろしくお願いいたします。

[一生見てられる...カワイすぎるローディングをCSSコピペで実装！ 【 アニメーション 】 - デシノン
https://deshinon.com/2019/03/03/kawaii-loading-k …

跳ねるうさぎちゃん

No.1 ベストアンサー 回答者： fujillin 回答日時： 2022/09/21 09:22

こんにちは

＞サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが～
えぇっと・・
ご提示のサイトのままだと「背景が消える」ようにはなっていないと思いますが・・？
（何か追加なさっているのでしょうか？）
そのままであれば、全体にずっと繰り返して動作するように作られているように見受けられます。
どのタイミングでロゴ等を消したいのでしょうか？
・・というのも、そのアニメーションのスクリプト部分はonloadで動作するようになっているので、「HTMLの読み込みが終わったら」アニメーションが開始するようになっているからです。
ajax等で本体の読み込みを行って、それが終了したら、アニメーションを消すとかであればわかりますけれど、重たいページを読み込んで・・というのだと、読み込み後にスタートしかねません。

仕組みを簡単に述べておくなら、ウサギと卵の部分のアニメーションは全てCSSで行われています。
「LOADING...」部分のアニメーションだけスクリプトになっています。
ウサギや卵はdiv要素を丸や楕円状にして組み合わせていて、画像を使わずに、とっても上手く作られていますね。
その割には、LOADING部分のアニメーションだけが、なぜスクリプトなのかが不明です。
単純にドットを表示/非表示するだけのアニメーションなら、CSSでも簡単にできるのに・・


＞多分javascriptの部分だと思うのですが、どう書いたらよいでしょうか？
上記のように、スクリプトはLOADING部分のアニメーションにしか関係していません。
先に述べたタイミングの話もありますが、単純に消すだけならラッパー要素を設けて非表示にすれば済みます。
ただし、その場合には、
・bodyに背景色その他のCSSが設定されているので、そのCSSだけ残ってしまう。
・スクリプトは動き続けるので、ブラウザの負荷になり続ける。
という問題があります。

対応法としては、
・ラッパー要素にbodyのCSSを移す。
・スクリプトのIntervalを停止する。
　（IntervalIDを保持しておく必要があります）
https://developer.mozilla.org/ja/docs/Web/API/cl …
　あるいは、スクリプト部分のアニメーションもCSS化しておくことでも可。
その上で、ラッパー要素を非表示にすれば宜しいでしょう。
（スクリプトから行うなら、display:noneに設定）

タイミング的に、イベント等ではなく、一定時間待ってから非表示にするのなどであるのなら、CSSでも可能です。
CSSアニメーションで、一定時間後にラッパーを height:0 になるようにすれば良いでしょう。

多分、再表示はしないのでしょうから、スクリプトでラッパー要素ごと削除してしまうのが一番宜しそうに思います。
https://developer.mozilla.org/ja/docs/Web/API/El …

この回答へのお礼

ありがとうございました。

お礼日時：2022/09/23 16:51