ECでカバーページを付けてほしいと言われたら

実装手順

cssに専用の記載を追加

    #logo_loader {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 201;
        background-color: #282828;// カバーページの背景色
      }
      #logo_loader .loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 240px;// 表示させるロゴ等のサイズ
        height: 323px;// 表示させるロゴ等のサイズ
        text-align: center;
      }
      #logo_loader .loading img {
        width: 100%;
        height: auto;
      }
      @media (max-width: 767px) {
        #logo_loader .loading {
          width: 200px;
          height: 269px;
        }
      }
      #logo_loader.open {
        animation-name: loadingOut;
        animation-fill-mode: forwards;
        animation-duration: 3s;
        animation-delay: 2s;
        animation-timing-function: cubic-bezier(0.43, 0.05, 0.17, 1);
      }
      
      @keyframes loadingOut {
        0% {
          opacity: 1;
          transform: translateX(0%);
        }
        50% {
          opacity: 0;
          transform: translateX(0%);
        }
        100% {
          opacity: 0;
          transform: translateX(-100%);
        }
      }

※色やロゴのサイズなどはサイトイメージに合わせて適宜変更してください。

メインビジュアルの下に下記記述を追加

    <section class="open" id="logo_loader">
    <div class="loading"><img alt="タイトル" src="ドメイン/images/material/ロゴなど.png"></div>
    </section>

※メインビジュアルと同じarea_1の中に入れるのがいいと思います。

以上で実装完了です。細かい箇所は調整してください。

sassも用意しました。初期制作の場合はこれをcoreフォルダなどに入れればすぐ実装できると思います。
sassをDL