Skip to content

Commit

Permalink
Fix select boxer transition
Browse files Browse the repository at this point in the history
  • Loading branch information
@midudev
midudev committed Mar 13, 2024
1 parent 39f1320 commit 1af3dcc
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 66 deletions.
16 changes: 5 additions & 11 deletions src/pages/boxers/[id].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,13 @@ const [boxer] = BOXERS.filter((boxer) => boxer.id === id)
>
<main class="flex flex-col items-center">
<div class="w-full lg:flex lg:items-center">
<picture
class:list={"boxer-photo h-auto w-[400px] object-contain"}
transition:name="boxer-big-image"
>
<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
<picture class="boxer-photo h-auto w-[400px]" transition:name="boxer-big-image">
<source srcset={`/img/boxers/${id}-big.avif`} type="image/avif" />
<img
class="aspect-[285/428] h-auto w-full"
alt="Fotografía de El Mariana"
src="/img/boxers/el-mariana-big.webp"
style="
filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5));
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
"
alt={`Fotografía de ${boxer.name}`}
src={`/img/boxers/${id}-big.webp`}
style="filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5)); mask-image: linear-gradient(to bottom, black 80%, transparent 100%);"
/>
</picture>
<div class="w-full px-10 text-center lg:mx-auto lg:w-1/2 lg:text-left">
Expand Down
107 changes: 52 additions & 55 deletions src/sections/SelectYourBoxer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ const listOfBoxers = BOXERS.map((boxer) => {
const countryName = COUNTRIES[country]?.name || ""
return { ...boxer, countryName }
})
const msFadeLuchador = 150
---

<section class="my-40">
Expand All @@ -28,10 +26,7 @@ const msFadeLuchador = 150
</Typography>

<div class="flex flex-col items-center justify-center gap-8">
<article
class="relative flex w-full flex-col items-center justify-center"
style="view-transition-name: boxer;"
>
<article class="relative flex w-full flex-col items-center justify-center">
<header class="relative flex w-full flex-col items-center justify-center">
<div
class="absolute inset-0 -z-20 m-auto bg-center bg-no-repeat"
Expand All @@ -43,12 +38,12 @@ const msFadeLuchador = 150
>
</div>
<picture
class:list={"boxer-photo h-auto w-[400px] object-contain"}
class:list={"boxer-photo aspect-[285/428] h-auto w-[400px]"}
transition:name="boxer-big-image"
>
<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
<img
class="aspect-[285/428] h-auto w-full"
class="aspect-[285/428] h-auto w-full object-contain"
alt="Fotografía de El Mariana"
src="/img/boxers/el-mariana-big.webp"
style="
Expand All @@ -70,41 +65,40 @@ const msFadeLuchador = 150
</div>

<img
class:list={`boxer-flag pointer-events-none aspect-[3/2] h-auto w-20 object-contain object-center transition duration-[${msFadeLuchador}] 3xl:w-24`}
class:list={"boxer-flag pointer-events-none aspect-[3/2] h-auto w-20 object-contain object-center 3xl:w-24"}
alt="Bandera de México"
src="/img/flags/mx.webp"
/>
</header>

<footer
id="boxer-footer"
class="absolute bottom-0 hidden w-full justify-between text-center text-white transition duration-200 xl:flex"
class="absolute bottom-0 hidden w-full justify-between text-center text-white xl:flex"
>
<div class="flex flex-col gap-y-2">
<h4 class="text-lg">País</h4>
<p id="boxer-country" class="text-lg font-bold">México</p>
<a
href="#"
class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
class="mt-10 inline-block font-semibold text-accent transition-transform hover:scale-110"
>
Ver combate
</a>
</div>

<div class="flex flex-col gap-y-2">
<h4 class="text-lg">Peso</h4>
<p id="boxer-weight" class="text-lg font-bold">87</p>
<p id="boxer-weight" class="text-lg font-bold">87kg</p>
<a
href="#"
class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
class="mt-10 inline-block font-semibold text-accent transition-transform hover:scale-110"
>
Ver perfil
</a>
</div>
</footer>
</article>
<aside class="boxers-aside">
<div class="blur"><div class="clip-black"></div></div>
<nav class="boxers-nav">
{
listOfBoxers.map(({ id, name, country, countryName, weight }, index) => (
Expand All @@ -119,14 +113,12 @@ const msFadeLuchador = 150
data-weight={weight}
>
<div class="boxer-link-background" />
<picture class="boxer-image">
<img
loading="lazy"
src={`/img/boxers/${id}-small.webp`}
alt={`Foto en pequeño del boxeador ${name}`}
class="boxer-image"
/>
</picture>
<img
loading="lazy"
src={`/img/boxers/${id}-small.webp`}
alt={`Foto en pequeño del boxeador ${name}`}
class="boxer-image aspect-square h-full w-full object-contain"
/>
</a>
))
}
Expand All @@ -137,7 +129,7 @@ const msFadeLuchador = 150

<script>
document.addEventListener("astro:page-load", () => {
const boxerLinks = document.querySelectorAll(".boxer-link")
const boxerLinks = document.querySelectorAll(".boxer-link") as NodeListOf<HTMLAnchorElement>
const boxerNav = document.querySelector(".boxers-nav")
const boxerTitle = document.querySelector(".boxer-title") as HTMLImageElement
const boxerPhoto = document.querySelector(".boxer-photo") as HTMLPictureElement
Expand All @@ -146,29 +138,44 @@ const msFadeLuchador = 150
const boxerCountryElement = document.getElementById("boxer-country") as HTMLElement
const boxerWeightElement = document.getElementById("boxer-weight") as HTMLElement

boxerLinks.forEach((link) => {
link.addEventListener("mouseenter", (event) => {
const currentTarget = event.currentTarget as HTMLElement
if (currentTarget.classList.contains("active")) return
function activateBoxer(element: HTMLElement, link: HTMLElement, replaceUrl: boolean = false) {
if (element.classList.contains("active")) return

const { id, name, country, countryName, weight } = element?.dataset

const { id, name, country, countryName, weight } = currentTarget?.dataset
boxerNav?.querySelector(".active")?.classList.remove("active")
link.classList.add("active")
if (replaceUrl) {
history.replaceState({}, "", `?boxer=${id}`)
}

boxerNav?.querySelector(".active")?.classList.remove("active")
link.classList.add("active")
const boxerSrc = `/img/boxers/${id}-big`

const boxerSrc = `/img/boxers/${id}-big`
boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
boxerCountry.src = `/img/flags/${country}.webp`

boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
boxerCountry.src = `/img/flags/${country}.webp`
boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
boxerCountry.alt = `Bandera de ${countryName}`

boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
boxerCountry.alt = `Bandera de ${countryName}`
boxerCountryElement.innerText = countryName ?? ""
boxerWeightElement.innerText = weight ? `${weight}kg` : "?"
boxerFooter.style.display = "flex"
}

const urlParams = new URLSearchParams(window.location.search)
const boxerId = urlParams.get("boxer") ?? "el-mariana"
const boxerEl = document.querySelector(`[data-id="${boxerId}"]`) as HTMLElement
if (boxerEl) {
activateBoxer(boxerEl, boxerEl, false)
}

boxerCountryElement.innerText = countryName ?? ""
boxerWeightElement.innerText = weight ?? ""
boxerFooter.style.display = "flex"
boxerLinks.forEach((link) => {
link.addEventListener("mouseenter", (event) => {
const currentTarget = event.currentTarget as HTMLElement
if (currentTarget.classList.contains("active")) return
activateBoxer(currentTarget, link, true)
})
})
})
Expand Down Expand Up @@ -225,22 +232,22 @@ const msFadeLuchador = 150
.boxer-image {
object-fit: contain;
z-index: 2;
transition: all 0.3s ease-in-out;
height: 100%;
transition: transform 0.3s ease-in-out;
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.boxer-link:hover .boxer-image {
transform: scale(1.05);
}
.boxer-link .boxer-image {
filter: grayscale(100%);
transition: filter 0.3s ease;
}

.boxer-link:hover .boxer-image,
.boxer-link.active .boxer-image {
transform: scale(1.05);
filter: grayscale(0%);
}

.boxer-link.active .boxer-link-background,
.boxer-link:hover .boxer-link-background {
filter: brightness(0.5);
}
Expand All @@ -264,15 +271,5 @@ const msFadeLuchador = 150
@apply flex items-center justify-center;
width: 100%;
}

.boxer-image {
@apply h-full;
}
}

@media (max-width: 1650px) {
.boxers-aside.up {
margin-top: -15rem;
}
}
</style>

0 comments on commit 1af3dcc

Please sign in to comment.