カバーページ 初回訪問時のみにつける

問題

TOPページに戻るたびにローディングアニメーションがつくのは煩わしいという指摘がありましたので、
対応しました。

対応したサイト

https://www.sushi-yamazaki2024.com/

コード

html

<section class="loader-exit" id="logo_loader">
    <div class="loading">
      <img alt="タイトル" src="/wp-content/uploads/ロゴなど.png" />
    </div>
  </section>

scss

    #logo_loader {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 201;
        background: url(/wp-content/uploads/intro_bg001.jpg) no-repeat center center/cover;
    
        .loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: calc(912px / 2); // 表示させるロゴ等のサイズ
            height: calc(130px / 2); // 表示させるロゴ等のサイズ
            text-align: center;
            img {
                width: 100%;
                height: auto;
            }
        }
        @media (max-width: 767px) {
            .loading {
                width: 280px;
                height: 150px;
            }
        }
    
        &.loader_active {
            display: block;
        }
    
        &.loader-exit {
            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 fadeLogo {
        0% {
            left: 0;
        }
        50% {
            left: 0;
        }
        100% {
            left: 100%;
        }
    }
    
    @keyframes loadingOut {
        0% {
            opacity: 1;
            transform: translateX(0%);
        }
        50% {
            opacity: 0;
            transform: translateX(0%);
        }
        100% {
            opacity: 0;
            transform: translateX(-100%);
        }
    }
    
    

js

window.addEventListener("DOMContentLoaded", () => {
  const loadingElement = document.getElementById("logo_loader");

  if (loadingElement && !sessionStorage.getItem("firstVisit")) {
    sessionStorage.setItem("firstVisit", "true");
    loadingElement.classList.add("loader_active");
  }
});

解説

sessionStorage を利用して、ページを訪れたかどうかを判定