Updated
This commit is contained in:
marzban-dev
@@ -2,135 +2,208 @@
|
||||
// import
|
||||
|
||||
import useHomeData from "~/composables/api/home/useHomeData";
|
||||
import { motion } from "motion-v";
|
||||
|
||||
// state
|
||||
|
||||
const { data: homeData } = useHomeData();
|
||||
|
||||
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
|
||||
const activeSlide = ref(0);
|
||||
|
||||
let gsapTimeline: gsap.core.Timeline;
|
||||
let scrollTrigger: ScrollTrigger;
|
||||
const variants = {
|
||||
hide: { opacity: 0, y: -200 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
when: "beforeChildren",
|
||||
staggerChildren: 0.15,
|
||||
},
|
||||
},
|
||||
exit: (slidesCount: number) => {
|
||||
return {
|
||||
opacity: 0,
|
||||
y: 200,
|
||||
transition: {
|
||||
when: "afterChildren",
|
||||
delay: slidesCount * 0.21,
|
||||
staggerChildren: 0.1,
|
||||
staggerDirection: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
// lifecycle
|
||||
const childContentVariants = {
|
||||
hide: {
|
||||
filter: "blur(20px)",
|
||||
opacity: 0,
|
||||
},
|
||||
show: {
|
||||
filter: "blur(0px)",
|
||||
opacity: 1,
|
||||
},
|
||||
exit: {
|
||||
filter: "blur(20px)",
|
||||
opacity: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const childImageVariants = {
|
||||
hide: {
|
||||
filter: "blur(20px)",
|
||||
y: 70,
|
||||
scale: 0.65,
|
||||
opacity: 0,
|
||||
},
|
||||
show: {
|
||||
filter: "blur(0px)",
|
||||
y: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
type: "spring",
|
||||
damping: 20,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
filter: "blur(20px)",
|
||||
y: 70,
|
||||
scale: 0.65,
|
||||
opacity: 0,
|
||||
transition: {
|
||||
default: {
|
||||
type: "spring",
|
||||
damping: 20,
|
||||
},
|
||||
opacity: {
|
||||
duration: 0.1,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const nextSlide = () => {
|
||||
const slidesCount = homeData.value!.show_case_slider.length;
|
||||
if (activeSlide.value > slidesCount - 2) {
|
||||
activeSlide.value = 0;
|
||||
} else {
|
||||
activeSlide.value = activeSlide.value + 1;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
gsapTimeline = gsap.timeline();
|
||||
const showcaseElements = gsap.utils.toArray<HTMLElement>(".showcase-slide");
|
||||
nextSlide();
|
||||
|
||||
setTimeout(() => {
|
||||
showcaseElements.forEach((element, index) => {
|
||||
gsapTimeline.fromTo(
|
||||
element,
|
||||
index === 0
|
||||
? {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
// rotateX: -25,
|
||||
zIndex: 1,
|
||||
top: 0,
|
||||
ease: "none",
|
||||
}
|
||||
: {
|
||||
opacity: 0,
|
||||
scale: 1,
|
||||
// rotateX: -25,
|
||||
zIndex: 1,
|
||||
top: 20,
|
||||
ease: "none",
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
// rotateX: 0,
|
||||
zIndex: 5,
|
||||
top: 0,
|
||||
ease: "none",
|
||||
},
|
||||
index === 0 ? "-=0%" : undefined
|
||||
);
|
||||
|
||||
if (index < showcaseElements.length - 1) {
|
||||
gsapTimeline.to(element, {
|
||||
opacity: 0,
|
||||
scale: 1.03,
|
||||
// rotateX: 25,
|
||||
top: -20,
|
||||
ease: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
scrollTrigger = ScrollTrigger.create({
|
||||
trigger: "#products-showcase-container",
|
||||
animation: gsapTimeline,
|
||||
scrub: 1,
|
||||
pin: true,
|
||||
start: "top top",
|
||||
anticipatePin: 1,
|
||||
// markers: true,
|
||||
end: "bottom top",
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
scrollTrigger.update();
|
||||
scrollTrigger.refresh();
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
gsapTimeline.progress(1).pause();
|
||||
gsapTimeline.kill();
|
||||
setInterval(() => {
|
||||
nextSlide();
|
||||
}, 5000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
id="products-showcase-container"
|
||||
class="perspective-midrange relative z-[999]"
|
||||
>
|
||||
<div class="w-full min-h-[120svh] lg:min-h-[102svh] bg-black">
|
||||
<div
|
||||
<section class="relative z-[999] h-[115svh] min-h-[1000px] pb-20 bg-black overflow-y-hidden flex-center">
|
||||
<AnimatePresence mode="popLayout">
|
||||
<template
|
||||
v-for="(slide, index) in homeData!.show_case_slider"
|
||||
:key="index"
|
||||
class="showcase-slide origin-bottom absolute size-full bg-black flex items-center justify-center max-lg:-mt-16 lg:mt-5"
|
||||
:key="slide.id"
|
||||
>
|
||||
<NuxtImg
|
||||
class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
|
||||
:src="slide.image"
|
||||
:style="{
|
||||
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%)',
|
||||
}"
|
||||
alt=""
|
||||
/>
|
||||
<div class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20">
|
||||
<span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
|
||||
{{ slide.title }}
|
||||
</span>
|
||||
<p
|
||||
class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg"
|
||||
>
|
||||
{{ slide.description }}
|
||||
</p>
|
||||
<NuxtLink
|
||||
:to="`/resellers/category/${slide.id}`"
|
||||
class="relative"
|
||||
>
|
||||
<NuxtImg
|
||||
src="/img/heymlz/heymlz-falling.gif"
|
||||
class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
|
||||
/>
|
||||
<Button
|
||||
variant="primary"
|
||||
end-icon="ci:arrow-left"
|
||||
class="mt-8 max-sm:py-2 max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
|
||||
<motion.div
|
||||
v-if="activeSlide === index"
|
||||
:initial="{ opacity: 0 }"
|
||||
:animate="{ opacity: 1 }"
|
||||
:exit="{ opacity: 0 }"
|
||||
:transition="{ duration: 1 }"
|
||||
class="absolute size-full inset-0 -z-10"
|
||||
>
|
||||
<NuxtImg
|
||||
:src="slide.background_image"
|
||||
class="absolute size-full object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
</template>
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence mode="popLayout">
|
||||
<template
|
||||
v-for="(slide, index) in homeData!.show_case_slider"
|
||||
:key="slide.id"
|
||||
>
|
||||
<motion.div
|
||||
v-if="activeSlide === index"
|
||||
:custom="homeData!.show_case_slider.length"
|
||||
:variants="variants"
|
||||
initial="hide"
|
||||
animate="show"
|
||||
exit="exit"
|
||||
class="size-full flex flex-col gap-20 items-center justify-center"
|
||||
>
|
||||
<div class="flex items-center gap-6 perspective-midrange">
|
||||
<motion.div
|
||||
:variants="childImageVariants"
|
||||
class="origin-bottom-left"
|
||||
>
|
||||
مشاهده دسته بندی
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtImg
|
||||
class="w-[300px] z-20 mt-40"
|
||||
:src="slide.image3"
|
||||
alt=""
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
:variants="childImageVariants"
|
||||
class="origin-bottom"
|
||||
>
|
||||
<NuxtImg
|
||||
class="w-[300px] z-20"
|
||||
:src="slide.image2"
|
||||
alt=""
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
:variants="childImageVariants"
|
||||
class="origin-bottom-right"
|
||||
>
|
||||
<NuxtImg
|
||||
class="w-[300px] z-20 mt-40"
|
||||
:src="slide.image1"
|
||||
alt=""
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
:variants="childContentVariants"
|
||||
class="flex flex-col items-center justify-center gap-6 text-center"
|
||||
>
|
||||
<span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
|
||||
{{ slide.title }}
|
||||
</span>
|
||||
<p
|
||||
class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg"
|
||||
>
|
||||
{{ slide.description }}
|
||||
</p>
|
||||
<NuxtLink
|
||||
:to="`/resellers/category/${slide.id}`"
|
||||
class="relative"
|
||||
>
|
||||
<NuxtImg
|
||||
src="/img/heymlz/heymlz-falling.gif"
|
||||
class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
|
||||
/>
|
||||
<Button
|
||||
variant="primary"
|
||||
end-icon="ci:arrow-left"
|
||||
class="mt-8 max-sm:py-2 max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
|
||||
>
|
||||
مشاهده دسته بندی
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</template>
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user