From f707e280cfd48661ccc09c92c8d6e932925e9635 Mon Sep 17 00:00:00 2001 From: SeeChen Date: Mon, 18 Nov 2024 22:29:31 +0800 Subject: [PATCH] Update Img --- CascadingStyleSheets/Travel/travel.css | 140 ++++++++++++++++++++++++- JavaScript/Travel/travel.js | 50 ++++++++- spa.html | 6 +- 3 files changed, 193 insertions(+), 3 deletions(-) diff --git a/CascadingStyleSheets/Travel/travel.css b/CascadingStyleSheets/Travel/travel.css index f12d3c8..43867bf 100644 --- a/CascadingStyleSheets/Travel/travel.css +++ b/CascadingStyleSheets/Travel/travel.css @@ -38,6 +38,13 @@ --travel-Story-Img-Area-Box-width: 85%; --travel-Story-Img-Area-Img-width: calc(100% / 4.01); + + --travel-Img-Clicked-Details-width: 75vw; + + --travel-Img-Clicked-Details-Box-top: 0; + --travel-Img-Clicked-Details-Box-left: 0; + --travel-Img-Clicked-Details-Box-width: 0; + --travel-Img-Clicked-Details-Box-height: 0; } @media screen and (max-width: 750px) { @@ -75,6 +82,8 @@ --travel-Story-Img-Area-Box-width: 90%; --travel-Story-Img-Area-Img-width: calc(100% / 2.01); + + --travel-Img-Clicked-Details-width: 90vw; } } @@ -114,6 +123,20 @@ } +@keyframes img_details { + from { + + border-radius: 0em; + max-height: 75vh; + } + + to { + top: 0; + max-height: 30vh; + border-radius: 1em; + } +} + #box_TravelPage { width: 100vw; @@ -600,10 +623,125 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar { max-height: 1000vh; opacity: 1; - transition: all 0.5s; + transition: all 0.5s, opacity 0s; animation: travel_animation_1 1s linear; animation-timeline: view(); + + cursor: pointer; +} + +#traveled_ImgArea img.imgClicked { + + transition: opacity 0s; + opacity: 0; +} + +#img_clicked_details { + position: fixed; + + background: rgba(255, 255, 255, 0.5); + + width: 100vw; + height: 100vh; + + top: 0; + left: 0; + + z-index: 9999 !important; + + overflow: hidden scroll; + + text-align: center; + + transition: all 0.5s; + + display: block; +} + +#img_clicked_details.hideInView { + + top: var(--travel-Img-Clicked-Details-Box-top); + left: var(--travel-Img-Clicked-Details-Box-left); + width: var(--travel-Img-Clicked-Details-Box-width); + height: var(--travel-Img-Clicked-Details-Box-height); + + overflow: visible visible; + + transition: all 0.5s; + + display: block; +} + +#img_clicked_details.hideNoAnimation { + + display: none !important; + transition: all 0s !important; + overflow: hidden; +} + +#img_clicked_details.hideInView img { + position: absolute; + top: 0; + width: var(--travel-Img-Clicked-Details-Box-width); + height: var(--travel-Img-Clicked-Details-Box-height); +} + +#img_clicked_details::-webkit-scrollbar { + display: none; +} + +#img_clicked_details span { + position: sticky; + + top: 1em; + left: 1em; + + display: block; + + width: var(--font-size-3em); + height: var(--font-size-3em); + line-height: var(--font-size-3em); + + background: var(--bg-color); + + border: 0.15em solid var(--font-color-title); + border-radius: 10em; + + cursor: pointer; +} + +#img_clicked_details img { + + position: sticky; + + top: calc(25vh / 2); + left: 0; + right: 0; + + max-width: var(--travel-Img-Clicked-Details-width); + max-height: 75vh; + + box-shadow: 0.15em 0.15em 0.15em #888; + + margin: auto; + + animation: img_details 1s linear; + animation-timeline: scroll(); +} + +#img_clicked_details > div { + position: absolute; + + background: rgba(255, 255, 255, 0.8); + + top: 90vh; + + width: 100vw; + height: 90vh; + + box-shadow: -0.15em -0.15em 0.15em var(--bg-color); + border-radius: 1em; } #traveled_ImgArea .traveled_story_img.no-in-choose-animation { diff --git a/JavaScript/Travel/travel.js b/JavaScript/Travel/travel.js index 90cadba..058f319 100644 --- a/JavaScript/Travel/travel.js +++ b/JavaScript/Travel/travel.js @@ -13,6 +13,54 @@ export const SeeChen_TravelPage = { }); await SeeChen_TravelPage_ImgLabels.buildRelationshipMap(); + + document.querySelector("#traveled_ImgArea").addEventListener("click", (e) => { + + if (e.target.tagName !== "IMG") { + return; + } + + const detailsArea = document.querySelector("#img_clicked_details"); + + detailsArea.querySelector("img").src = e.target.src; + detailsArea.scrollTo(0, 0); + + const currentRect = e.target.getBoundingClientRect(); + + let current_top = currentRect.top; + let current_left = currentRect.left; + let current_width = e.target.offsetWidth; + let current_height = e.target.offsetHeight; + + document.documentElement.style.setProperty("--travel-Img-Clicked-Details-Box-top", `${current_top}px`); + document.documentElement.style.setProperty("--travel-Img-Clicked-Details-Box-left", `${current_left}px`); + document.documentElement.style.setProperty("--travel-Img-Clicked-Details-Box-width", `${current_width}px`); + document.documentElement.style.setProperty("--travel-Img-Clicked-Details-Box-height", `${current_height}px`); + + setTimeout(() => { + + detailsArea.classList.remove("hideNoAnimation"); + setTimeout(() => { + + e.target.classList.add("imgClicked"); + detailsArea.classList.remove("hideInView"); + }, 250); + }, 250); + }); + + document.querySelector("#img_clicked_details").addEventListener("click", (e) => { + + if (e.target.tagName === "IMG" || e.target.classList.contains("img_details")) { + return; + } + + document.querySelector("#img_clicked_details").classList.add("hideInView"); + + setTimeout(() => { + document.querySelector("#img_clicked_details").classList.add("hideNoAnimation"); + document.querySelector(".imgClicked").classList.remove("imgClicked"); + }, 500); + }); }, render: async () => { @@ -529,7 +577,7 @@ const SeeChen_TravelPage_ImgLabels_Event = { img.classList.add("no-in-choose-animation"); setTimeout(() => { img.classList.add("no-in-choose"); - }, 1000); + }, 500); } else { img.classList.remove("no-in-choose"); setTimeout(() => { diff --git a/spa.html b/spa.html index c244c54..d4aa3e5 100644 --- a/spa.html +++ b/spa.html @@ -67,6 +67,11 @@
+
+ 🗙 + +
+
@@ -112,7 +117,6 @@
-