スクロールmbti 10:ロードウィンドウの実装

??: でもこれは...結果はまだ実現していませんか?
配置されたサービスを周囲の人に少し共有しましたが、結果は出ませんでした.
無料サーバを使用するため、ロード時間が長すぎる場合や、無限のロードが必要な場合があります.
ユーザの利便性を向上させるため、ロードウィンドウを実施することにした.
ロード時間が長すぎるのを防ぐために、いくつかの文を追加します.

ロードアニメーションの実装

ちょうど背景もフォントもレトロな感じ.ロードウィンドウにPacManがあることを望んでいます.
マスク師さんは思ったほど難しくなく、半円を重ねて上下に揺れていれば大丈夫です.
ハートを食べる姿で表現することにしました.
コードから見ると、以下のようになります.
マスク師の上と下を区別します
その結果、丸い顔を作るためには、高さが幅の半分でなければなりません.

const PacmanTop = styled.div`
  position: relative;
  background-color: #3bc9db;
  height: 70px;
  width: 140px;
  border-radius: 70px 70px 0 0;
  z-index: 10;
  animation: ${spin1} 0.7s infinite;
`;

const PacmanBottom = styled.div`
  position: relative;
  background-color: #3bc9db;
  height: 70px;
  width: 140px;
  border-radius: 0 0 70px 70px;
  z-index: 10;
  animation: ${spin2} 0.7s infinite;
`;

一緒に上のアニメを見ます.
これは生き生きとしたアニメであることが確認できます.

const spin1 = keyframes`
    from  {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-35deg);
    }
`;

const spin2 = keyframes`
    from  {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(35deg);
    }
`;

今ここまで学べば、もうPacManのうやむやなアニメが完成しました.
ハートを作ろう
Heartは仮想要素を利用して作成します.正方形に半円を貼り付けてハート形にする原理を利用します.
Heartをして、移動したら左の位置を遠くから近くまで移動すればいいです.

ロード時の決定文

このプロジェクトは、ヒーローズアライアンス、ヒーローズアライアンス、ヒーローズアライアンスに関するプロジェクトなので、ロード中の文にもヒーローズアライアンスに関連する文がランダムに表示されることを望んでいます.
個人的にはゲームロード文の中でハストンロード文が面白いと思います.
△ちなみに、彼はいつも相手に合っている......たまに競技場で詐欺師に会ったとき、彼は空っぽだと思った.

このような感覚の高品質なイメージでなくても、文にアイデアを加えたいだけです.
決められた語句は以下の通りです.

    "누누 눈 굴리는 중",
    "아무무 친구 만드는 중",
    "스웨인 새 모이 주는 중",
    "룰루 깔깔 대는 중",
    "나서스 농사 짓는 중",
    "베인 앞구르기 연습 중",

私は好きなスウェーンを置いて、他の友达と一緒に置いた.
ランダム関数を使用してランダム状態を表示します.

時間が長すぎると

モンゴDB、バックエンド、フロントエンドは無料サーバーで、時間がかかるサービスです.時間がかかりすぎるため、settimeout関数を使用して다시 시도해달라文を追加することにしました.

 setTimeout(() => {
    if (통신이 안됐다면) setLoading("너무 오래 걸리면, 다시 시도해주시겠어요?");
  }, 5000);

今はプロジェクトの最後です.携帯電話のビューのcssを少し修正すればプロジェクトを完成できます.