SWELL│トップページでローディング画面を表示する方法│ロゴアニメーション│スプラッシュ画面

/* ローディング画面表示 */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* オーバーレイの下にある要素へのクリックを妨げない */
  animation: overlayFadeOut 2.5s 2s forwards;
}

.loader-overlay img {
  width: 360px; /* PCのロゴ画像のサイズ */
  opacity: 0;
  transform: scale(0.9); /* 初期状態は少し小さく */
  animation: logoFadeZoom 1.5s ease-out forwards, logoFadeOut 1.5s 1.5s ease-out forwards; /* ロゴのフェードインとフェードアウトアニメーション */
}

@media screen and (max-width: 959px) {
  .loader-overlay img {
    width: 180px; /* スマホのロゴ画像のサイズ */
  }
}

/* ローディング画面全体のフェードアウトアニメーション */
@keyframes overlayFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ロゴのズームインとフェードインのアニメーション */
@keyframes logoFadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.9); /* 少し小さい状態から始める */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 徐々にフェードインしながら元のサイズに */
  }
}

/* ロゴがフェードアウトのアニメーション */
@keyframes logoFadeOut {
  0% {
    opacity: 1;
    transform: scale(1); /* フェードアウト前の状態を維持 */
  }
  100% {
    opacity: 0;
    transform: scale(1); /* サイズは維持したままフェードアウト */
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader-overlay { display: none; animation: none; }
  .loader-overlay img { animation: none; }
}

add_action('wp_body_open', function () {
    if ( ! is_front_page() ) { return; }
    echo '<div aria-hidden="true" inert>' . do_shortcode('[blog_parts id="270"]') . '</div>';
});