document.getElementById()

DOMContentLoaded

element.classList.remove()

setTimeout/clearTimeout

<div id="loading" class="loading-visible">
  <img
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/f0777f94-e50a-45b9-a196-a72b11e3bf25.png"
  />
</div>

<div id="container">
  <header>
    <h1>ダミーのウェブサイト</h1>
  </header>
  <main>
    <section>
      <h2>セクション1</h2>
      <p>ここにコンテンツが表示されます。</p>
    </section>
    <section>
      <h2>セクション2</h2>
      <p>さらにコンテンツが続きます。</p>
    </section>
    <section>
      <h2>セクション3</h2>
      <p>ここでコンテンツが終わります。</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2023ダミーのウェブサイト</p>
  </footer>
</div>


// 問題1. ウェブページが読み込まれた後に発生するイベントを受け取るJavaScriptを書いてください
// 問題2. ロードイベント内で、1.5秒後にloading-visibleを削除するJavascriptを書いてください
document.addEventListener('DOMContentLoaded', function () {
  setTimeout(function () {
      document.getElementById('loading').classList.remove('loading-visible')
  }, 1500)
})


body,
html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #16a085;
}
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}

#loading.loading-visible {
  opacity: 1;
  visibility: visible;
}


// 問題1. ウェブページが読み込まれた後に発生するイベントを受け取るJavaScriptを書いてください
// 問題2. ロードイベント内で、1.5秒後にloading-visibleを削除するJavascriptを書いてください


ロード画面を閉じる機能の実装

<img>

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

<div>

position: fixed

left

width

height

background-color

grid

place-items

ロード画面の配置とスタイルの設定

opacity

visibility

transition

表示・非表示をアニメーションさせるスタイルの設定

transform

ロゴをアニメーションさせるスタイルの設定

このレッスンでは、HTMLでローディング画面の配置し、CSSを使ってアニメーションスタイルを設定します。
ロード画面の表示・非表示のアニメーション効果と、ロード中のロゴアニメーションの作成方法を学びます。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

「ローディングアニメーション」レッスンの総復習クイズです。