히어로 수정
썸네일 적용
CSKIM
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 271 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 23 KiB |
@@ -95,7 +95,7 @@
|
|||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: #d8cbc4;
|
background: #f7f7f7;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-left: -215px;
|
margin-left: -215px;
|
||||||
transition:
|
transition:
|
||||||
@@ -115,7 +115,7 @@
|
|||||||
.hero-spacer {
|
.hero-spacer {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
height: 100svh;
|
height: 100svh;
|
||||||
background: #d8cbc4;
|
background: #f7f7f7;
|
||||||
transition: height 420ms cubic-bezier(.2, .8, .2, 1);
|
transition: height 420ms cubic-bezier(.2, .8, .2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
background: #d8cbc4;
|
background: #f7f7f7;
|
||||||
image-rendering: auto;
|
image-rendering: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -743,7 +743,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<main class="shell">
|
<main class="shell">
|
||||||
<header class="hero" data-aos="hero-cover" data-aos-duration="680" data-aos-once="true">
|
<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> -->
|
<!-- <a class="scroll-cue" href="#intro">스크롤<span></span></a> -->
|
||||||
</header>
|
</header>
|
||||||
<div class="hero-spacer" aria-hidden="true"></div>
|
<div class="hero-spacer" aria-hidden="true"></div>
|
||||||
@@ -937,6 +937,18 @@
|
|||||||
img.src = DATA.images[img.dataset.img];
|
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 openRouteLink = (event) => {
|
||||||
const route = DATA.links[event.currentTarget.dataset.link];
|
const route = DATA.links[event.currentTarget.dataset.link];
|
||||||
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||||
@@ -1082,7 +1094,7 @@
|
|||||||
document.querySelector("#timeline").innerHTML = DATA.timeline.map(([date, text, image]) => `
|
document.querySelector("#timeline").innerHTML = DATA.timeline.map(([date, text, image]) => `
|
||||||
<article class="milestone">
|
<article class="milestone">
|
||||||
<div class="milestone-visual">
|
<div class="milestone-visual">
|
||||||
<img src="${image}" alt="">
|
<img src="${toThumbnailPath(image)}" data-full="${image}" alt="" loading="lazy" decoding="async">
|
||||||
</div>
|
</div>
|
||||||
<div class="milestone-copy">
|
<div class="milestone-copy">
|
||||||
<time>${date}</time>
|
<time>${date}</time>
|
||||||
@@ -1104,7 +1116,7 @@
|
|||||||
galleryGridSlides.innerHTML = galleryGroups.map((group) => `
|
galleryGridSlides.innerHTML = galleryGroups.map((group) => `
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<div class="gallery-grid">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
`).join("");
|
`).join("");
|
||||||
@@ -1155,7 +1167,7 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
document.querySelectorAll(".milestone img, .gallery-grid img, .slider .swiper-slide img").forEach((image) => {
|
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);
|
closeButton.addEventListener("click", closeLightbox);
|
||||||
@@ -1232,6 +1244,7 @@
|
|||||||
const heroSpacer = document.querySelector(".hero-spacer");
|
const heroSpacer = document.querySelector(".hero-spacer");
|
||||||
let touchStartY = 0;
|
let touchStartY = 0;
|
||||||
let isDismissed = false;
|
let isDismissed = false;
|
||||||
|
let isRestoringHero = false;
|
||||||
|
|
||||||
if (!hero) {
|
if (!hero) {
|
||||||
return;
|
return;
|
||||||
@@ -1242,8 +1255,28 @@
|
|||||||
hero.classList.remove("is-dismissed");
|
hero.classList.remove("is-dismissed");
|
||||||
heroSpacer?.classList.remove("is-collapsed");
|
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 = () => {
|
const dismissHero = () => {
|
||||||
if (isDismissed) {
|
if (isDismissed || isRestoringHero) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1291,6 +1324,14 @@
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
dismissHero();
|
dismissHero();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
if (!isDismissed || window.scrollY > 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
showHero();
|
||||||
|
}, { passive: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
if (document.readyState === "complete") {
|
if (document.readyState === "complete") {
|
||||||
|
|||||||