ページ訪問後にタイトルロゴを表示

この記事を読むのにかかる時間 1未満分

以下を実装することでページロード時に3秒間タイトルロゴを表示する仕様を実装できます。
・黄色マーカー部をページに合わせて変更します。
・jQueryは別途読み込みください。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトルロゴ表示</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>

  </style>
</head>
<body>
  <div id="logo-overlay">
    <img src="logo.png" alt="タイトルロゴ">
  </div>
  <div id="main-content">
    <h1>ようこそ！</h1>
    <p>ページ内容がここに表示されます。</p>
  </div>
  <script> </script>
</body>
</html>

css

    body {
      margin: 0;
      overflow: hidden; /* 初期状態でスクロールを無効化 */
    }
    #logo-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff; /* 背景を白に設定 */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    #logo-overlay img {
      width: 150px; /* ロゴのサイズ調整 */
    }
    #main-content {
      display: none; /* 初期状態で非表示 */
    }

javascript[jquery]

    $(document).ready(function() {
      loadingLogo();
    });

    function loadingLogo(){
      // ページロード時に3秒間タイトルロゴを表示
      setTimeout(function() {
        $('#logo-overlay').fadeOut(1000, function() { // フェードアウト後に
          $('#main-content').fadeIn(1000); // メインコンテンツをフェードイン
          $('body').css('overflow', 'auto'); // スクロールを有効化
        });
      }, 3000); // 3秒待機
    }