![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
ローディングアニメーションを入れたいと思い、調べて、以下のサイトに辿り着いて、
サイトの一番下から2番目にある、「**跳ねるうさぎちゃん**」とういタイトルのローディングアニメーションのC◆DEOENで動く、HTML,css,jsの全てコピーして、起動してみたのですが、
サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが、その他のロゴ(ウサギや卵、横線)のロゴ等が
**消えずに動き続けてしまいます。**
このロゴもちゃんと消えるようにしたいです。
多分javascriptの部分だと思うのですが、どう書いたらよいでしょうか?
回答よろしくお願いいたします。
[一生見てられる...カワイすぎるローディングをCSSコピペで実装! 【 アニメーション 】 - デシノン
https://deshinon.com/2019/03/03/kawaii-loading-k …
跳ねるうさぎちゃん
No.1ベストアンサー
- 回答日時:
こんにちは
>サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが~
えぇっと・・
ご提示のサイトのままだと「背景が消える」ようにはなっていないと思いますが・・?
(何か追加なさっているのでしょうか?)
そのままであれば、全体にずっと繰り返して動作するように作られているように見受けられます。
どのタイミングでロゴ等を消したいのでしょうか?
・・というのも、そのアニメーションのスクリプト部分は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 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
メッセージボックスを前面に表...
-
SPREAD(GrapeCity)のセルにフォ...
-
Excelのマクロで実行時エラー”1...
-
TDSマジックランプシアター 箱...
-
除光液の正しい捨て方がわかり...
-
フォトショのアクションを別のM...
-
iPhoneのクイックアクションを...
-
コンボボックスの開いたリスト...
-
C#でButtonのフォーカス枠を消...
-
Unityのピンボールゲーム製作
-
Chrome フォーカス時に枠が表示...
-
初期フォーカスについて
-
Yahoo ID 有効なログイン方法が...
-
コンボボックスの三角を一時的...
-
ブルートゥースを有効にする方法
-
「あゆみ」という名前でインパ...
-
FLASHで、サーバの時間を取得し...
-
至急です。 トイレに行きたいな...
-
外側のドアスコープにここ四日...
-
他の人には声だして挨拶してる...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
メッセージボックスを前面に表...
-
SPREAD(GrapeCity)のセルにフォ...
-
Excelのマクロで実行時エラー”1...
-
コンボボックスの開いたリスト...
-
C#でButtonのフォーカス枠を消...
-
Chrome フォーカス時に枠が表示...
-
DAMのデンモクの使い方
-
コンボボックスの三角を一時的...
-
iPhoneのクイックアクションを...
-
3DS いつの間に交換日記
-
除光液の正しい捨て方がわかり...
-
TDSマジックランプシアター 箱...
-
Macのウィンドウが透ける
-
雷のようなアニメーションをウ...
-
至急です。 トイレに行きたいな...
-
初期フォーカスについて
-
Eclipse Javaエディタでの選択...
-
DataGridViewで入力チェック後...
-
MMDでAVI出力後の映像、音声に...
-
ASP.NETにてロストフォーカス処理
おすすめ情報