作成日時

サブテキスト

名前

ギャラリービュー

<div id="loading-screen">
  <div id="loading-text">Now Loading...</div>
  <div id="loading-percent">0%</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const loadingScreen = document.getElementById("loading-screen");
  const percentText = document.getElementById("loading-percent");

  // === ページがTOP以外ならスキップ ===
  if (location.pathname !== "/" && location.pathname !== "/index.html") return;

  // === 他ページ→ブラウザバック対策 ===
  // 同一セッション内ですでにTOPを開いていたら表示しない
  if (sessionStorage.getItem("visitedThisSession")) {
    // ただし「リロード」なら再表示OK
    const navType = performance.getEntriesByType("navigation")[0]?.type;
    if (navType !== "reload") return;
  }

  // === 初回 or リロード時のみローディング実行 ===
  sessionStorage.setItem("visitedThisSession", "true");
  loadingScreen.style.display = "flex";

  let progress = 0;

  // HSV→RGB（虹色に変化）
//   function hsvToRgb(h, s, v) {
//     let f = (n, k = (n + h / 60) % 6) =>
//       v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
//     return [f(5), f(3), f(1)];
//   }

//   const interval = setInterval(() => {
//     progress += 1;
//     percentText.textContent = progress + "%";

//     const hue = (progress / 100) * 300;
//     const [r, g, b] = hsvToRgb(hue, 1, 1).map(x => Math.round(x * 255));
//     percentText.style.color = `rgb(${r}, ${g}, ${b})`;

// カウントアップ処理（黒固定）
  const interval = setInterval(() => {
    progress += 1;
    percentText.textContent = progress + "%";
    percentText.style.color = "#000"; // ← 黒に固定

    if (progress >= 100) {
      clearInterval(interval);
      setTimeout(() => loadingScreen.classList.add("fade-out"), 300);
      setTimeout(() => (loadingScreen.style.display = "none"), 1200);
    }
  }, 30);
});

// === ブラウザバック時にはローディング非表示 ===
window.addEventListener("pageshow", (event) => {
  if (event.persisted) {
    const loadingScreen = document.getElementById("loading-screen");
    if (loadingScreen) loadingScreen.style.display = "none";
  }
});
</script>

ステージマジック

ステージマジック

ステージマジックの特徴

基本の流れ

こんなことも出来ます