作成日時

名前

ギャラリービュー

<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})`;

    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>

BLOG