히어로 수정

썸네일 적용
2026-05-07 01:55:51 +09:00
parent 694e6b9f5c
commit f509ed4d48
29 changed files with 49 additions and 8 deletions
@@ -95,7 +95,7 @@
      align-items: stretch;
      justify-content: center;
      padding: 0;
-      background: #d8cbc4;
+      background: #f7f7f7;
      overflow: hidden;
      margin-left: -215px;
      transition:
@@ -115,7 +115,7 @@
    .hero-spacer {
      height: 100vh;
      height: 100svh;
-      background: #d8cbc4;
+      background: #f7f7f7;
      transition: height 420ms cubic-bezier(.2, .8, .2, 1);
    }

@@ -128,7 +128,7 @@
      height: 100%;
      display: block;
      object-fit: contain;
-      background: #d8cbc4;
+      background: #f7f7f7;
      image-rendering: auto;
    }

@@ -743,7 +743,7 @@
 <body>
  <main class="shell">
    <header class="hero" data-aos="hero-cover" data-aos-duration="680" data-aos-once="true">
-      <img class="main-invitation" src="./images/hero.jpg" alt="김도아 돌잔치 초대장">
+      <img class="main-invitation" src="./images/thumbs/hero.jpg" alt="김도아 돌잔치 초대장" fetchpriority="high">
      <!-- <a class="scroll-cue" href="#intro">스크롤<span></span></a> -->
    </header>
    <div class="hero-spacer" aria-hidden="true"></div>
@@ -937,6 +937,18 @@
      img.src = DATA.images[img.dataset.img];
    });

+    const toThumbnailPath = (image) => {
+      if (image.startsWith("./images/")) {
+        return image.replace("./images/", "./images/thumbs/");
+      }
+
+      if (image.startsWith("/images/")) {
+        return image.replace("/images/", "/images/thumbs/");
+      }
+
+      return image;
+    };
+
    const openRouteLink = (event) => {
      const route = DATA.links[event.currentTarget.dataset.link];
      const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -1082,7 +1094,7 @@
    document.querySelector("#timeline").innerHTML = DATA.timeline.map(([date, text, image]) => `
      <article class="milestone">
        <div class="milestone-visual">
-          <img src="${image}" alt="">
+          <img src="${toThumbnailPath(image)}" data-full="${image}" alt="" loading="lazy" decoding="async">
        </div>
        <div class="milestone-copy">
          <time>${date}</time>
@@ -1104,7 +1116,7 @@
    galleryGridSlides.innerHTML = galleryGroups.map((group) => `
      <div class="swiper-slide">
        <div class="gallery-grid">
-          ${group.map((image) => `<img src="${image}" alt="">`).join("")}
+          ${group.map((image) => `<img src="${toThumbnailPath(image)}" data-full="${image}" alt="" loading="lazy" decoding="async">`).join("")}
        </div>
      </div>
    `).join("");
@@ -1155,7 +1167,7 @@
      };

      document.querySelectorAll(".milestone img, .gallery-grid img, .slider .swiper-slide img").forEach((image) => {
-        image.addEventListener("click", () => openLightbox(image.currentSrc || image.src, image.alt));
+        image.addEventListener("click", () => openLightbox(image.dataset.full || image.currentSrc || image.src, image.alt));
      });

      closeButton.addEventListener("click", closeLightbox);
@@ -1232,6 +1244,7 @@
      const heroSpacer = document.querySelector(".hero-spacer");
      let touchStartY = 0;
      let isDismissed = false;
+      let isRestoringHero = false;

      if (!hero) {
        return;
@@ -1242,8 +1255,28 @@
      hero.classList.remove("is-dismissed");
      heroSpacer?.classList.remove("is-collapsed");

+      const showHero = () => {
+        if (!isDismissed || isRestoringHero) {
+          return;
+        }
+
+        isRestoringHero = true;
+        isDismissed = false;
+        window.scrollTo({ top: 0, behavior: "auto" });
+        heroSpacer?.classList.remove("is-collapsed");
+        hero.classList.add("aos-init", "aos-animate");
+        hero.classList.remove("is-dismissed");
+
+        window.setTimeout(() => {
+          isRestoringHero = false;
+          if (window.AOS) {
+            AOS.refreshHard();
+          }
+        }, 460);
+      };
+
      const dismissHero = () => {
-        if (isDismissed) {
+        if (isDismissed || isRestoringHero) {
          return;
        }

@@ -1291,6 +1324,14 @@
        event.preventDefault();
        dismissHero();
      });
+
+      window.addEventListener("scroll", () => {
+        if (!isDismissed || window.scrollY > 1) {
+          return;
+        }
+
+        showHero();
+      }, { passive: true });
    };

    if (document.readyState === "complete") {