Updated
This commit is contained in:
marzban-dev
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
// import
|
||||
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
@@ -15,12 +14,9 @@ const swiper_instance = ref<SwiperClass | null>(null);
|
||||
const observerTarget = ref(null);
|
||||
const shouldPauseVideos = ref(false);
|
||||
|
||||
useIntersectionObserver(
|
||||
observerTarget,
|
||||
([entry], observerElement) => {
|
||||
useIntersectionObserver(observerTarget, ([entry], observerElement) => {
|
||||
shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const isMuted = ref(true);
|
||||
const slidesPerView = ref(1);
|
||||
@@ -37,7 +33,7 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
const updateVideoStates = () => {
|
||||
const activeIndex = swiper_instance.value?.realIndex || 0;
|
||||
const videosElements = document.querySelectorAll(`.slide-video`) as NodeListOf<HTMLVideoElement>;
|
||||
videosElements.forEach(videoElement => {
|
||||
videosElements.forEach((videoElement) => {
|
||||
if (videoElement.id === `slide-video-${activeIndex}` && !shouldPauseVideos.value) {
|
||||
videoElement.play();
|
||||
} else {
|
||||
@@ -48,58 +44,84 @@ const updateVideoStates = () => {
|
||||
|
||||
// watch
|
||||
|
||||
watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
|
||||
watch(
|
||||
() => [shouldPauseVideos.value, swiper_instance.value?.realIndex],
|
||||
() => {
|
||||
updateVideoStates();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// lifecycle
|
||||
|
||||
const initializeGsapAnimation = () => {
|
||||
gsapTimeline
|
||||
.fromTo(".header-slider-item", {
|
||||
.fromTo(
|
||||
".header-slider-item",
|
||||
{
|
||||
borderRadius: 0,
|
||||
height: "100svh"
|
||||
}, {
|
||||
height: "100svh",
|
||||
},
|
||||
{
|
||||
height: "80svh",
|
||||
borderRadius: "20px"
|
||||
})
|
||||
.fromTo(slidesPerView, {
|
||||
value: 1
|
||||
}, {
|
||||
value: 1.2
|
||||
}, "=")
|
||||
.fromTo(".header-navbar-item", {
|
||||
filter: "invert(100%)"
|
||||
}, {
|
||||
filter: "invert(0%)"
|
||||
}, "=")
|
||||
.fromTo("#header-navbar", {
|
||||
background: "transparent"
|
||||
}, {
|
||||
background: "white"
|
||||
})
|
||||
.fromTo("#header-slider-wrapper", {
|
||||
borderRadius: "20px",
|
||||
}
|
||||
)
|
||||
.fromTo(
|
||||
slidesPerView,
|
||||
{
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
value: 1.2,
|
||||
},
|
||||
"="
|
||||
)
|
||||
.fromTo(
|
||||
".header-navbar-item",
|
||||
{
|
||||
filter: "invert(100%)",
|
||||
},
|
||||
{
|
||||
filter: "invert(0%)",
|
||||
},
|
||||
"="
|
||||
)
|
||||
.fromTo(
|
||||
"#header-navbar",
|
||||
{
|
||||
background: "transparent",
|
||||
},
|
||||
{
|
||||
background: "white",
|
||||
}
|
||||
)
|
||||
.fromTo(
|
||||
"#header-slider-wrapper",
|
||||
{
|
||||
marginTop: "0px",
|
||||
scale: 1.025
|
||||
}, {
|
||||
scale: 1.025,
|
||||
},
|
||||
{
|
||||
marginTop: () => {
|
||||
const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
|
||||
return `${navbarEl.clientHeight}px`;
|
||||
},
|
||||
scale: 1
|
||||
}, "=");
|
||||
scale: 1,
|
||||
},
|
||||
"="
|
||||
);
|
||||
};
|
||||
|
||||
const resetTimelineForMobile = () => {
|
||||
gsap.to("#header-navbar", {
|
||||
background: "white"
|
||||
background: "white",
|
||||
});
|
||||
gsap.to(".header-navbar-item", {
|
||||
filter: "invert(0%)"
|
||||
filter: "invert(0%)",
|
||||
});
|
||||
gsap.set(".header-slider-item", {
|
||||
borderRadius: "20px",
|
||||
height: "450px"
|
||||
height: "450px",
|
||||
});
|
||||
};
|
||||
|
||||
@@ -118,7 +140,7 @@ onMounted(() => {
|
||||
pin: true,
|
||||
start: "top top",
|
||||
// markers: true,
|
||||
end: "bottom top"
|
||||
end: "bottom top",
|
||||
});
|
||||
|
||||
const calculateOnResize = () => {
|
||||
@@ -141,14 +163,12 @@ onMounted(() => {
|
||||
window.addEventListener("resize", () => {
|
||||
calculateOnResize();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
resetTimelineForMobile();
|
||||
scrollTrigger.disable();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -156,7 +176,10 @@ onUnmounted(() => {
|
||||
id="header-slider-container"
|
||||
class="w-full z-50"
|
||||
>
|
||||
<div id="header-slider-wrapper" class="relative">
|
||||
<div
|
||||
id="header-slider-wrapper"
|
||||
class="relative"
|
||||
>
|
||||
<Swiper
|
||||
ref="observerTarget"
|
||||
:slides-per-view="slidesPerView"
|
||||
@@ -164,8 +187,8 @@ onUnmounted(() => {
|
||||
:centered-slides="true"
|
||||
:breakpoints="{
|
||||
768: {
|
||||
spaceBetween : 40
|
||||
}
|
||||
spaceBetween: 40,
|
||||
},
|
||||
}"
|
||||
@swiper="onSwiper"
|
||||
>
|
||||
@@ -174,9 +197,7 @@ onUnmounted(() => {
|
||||
:key="slide.id"
|
||||
>
|
||||
<div class="max-md:container">
|
||||
<div
|
||||
class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
|
||||
>
|
||||
<div class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]">
|
||||
<template v-if="!!slide.video">
|
||||
<video
|
||||
:id="`slide-video-${index}`"
|
||||
@@ -202,14 +223,15 @@ onUnmounted(() => {
|
||||
:class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
|
||||
class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
|
||||
>
|
||||
|
||||
<div class="header-slider-item-child w-full">
|
||||
<div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
|
||||
<div class="flex items-center gap-4 lg:gap-8">
|
||||
<div
|
||||
class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
|
||||
class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
|
||||
class="size-full scale-75 bg-white absolute rounded-full animate-ping"
|
||||
/>
|
||||
<button
|
||||
@click="isMuted = !isMuted"
|
||||
class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
|
||||
@@ -244,7 +266,11 @@ onUnmounted(() => {
|
||||
id="header-slider-pagination-child"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<button @click="swiper_instance?.slidePrev()">
|
||||
<button
|
||||
@click="swiper_instance?.slidePrev()"
|
||||
class="relative"
|
||||
>
|
||||
<div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
|
||||
<Icon
|
||||
class="**:stroke-white cursor-pointer size-6 md:size-8"
|
||||
name="ci:arrow-right"
|
||||
@@ -253,27 +279,53 @@ onUnmounted(() => {
|
||||
<div class="flex items-center justify-center gap-3 text-white">
|
||||
<div
|
||||
v-for="(_slide, index) in homeData!.sliders"
|
||||
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
|
||||
:class="
|
||||
swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'
|
||||
"
|
||||
class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
|
||||
>
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<button>
|
||||
<Icon
|
||||
<button
|
||||
@click="swiper_instance?.slideNext()"
|
||||
class="relative"
|
||||
>
|
||||
<div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
|
||||
<Icon
|
||||
class="**:stroke-white cursor-pointer size-6 md:size-8"
|
||||
name="ci:arrow-left"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@keyframes ping-anime {
|
||||
0% {
|
||||
scale: 0.7;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
10% {
|
||||
scale: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
scale: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ping-animation {
|
||||
animation-name: ping-anime;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user