Deleted
This commit is contained in:
marzban-dev
@@ -1,208 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
// import
|
|
||||||
|
|
||||||
import useHomeData from "~/composables/api/home/useHomeData";
|
|
||||||
|
|
||||||
// state
|
|
||||||
|
|
||||||
const { data: homeData } = useHomeData();
|
|
||||||
|
|
||||||
const clipPathPercent = ref(49);
|
|
||||||
|
|
||||||
const activeSlideVideo = ref<"left" | "right" | "none">("none");
|
|
||||||
|
|
||||||
const draggableEl = ref<HTMLElement | null>(null);
|
|
||||||
const previewContainerEl = ref<HTMLElement | null>(null);
|
|
||||||
|
|
||||||
const heymlzElement = useTemplateRef<HTMLDivElement>("heymlzElement");
|
|
||||||
const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
|
|
||||||
rootMargin: "0px 0px -40% 0px",
|
|
||||||
});
|
|
||||||
|
|
||||||
const showHeymlzAnimation = ref(false);
|
|
||||||
|
|
||||||
const { x: dragAxisX } = useDraggable(draggableEl, {
|
|
||||||
initialValue: { x: 0, y: 0 },
|
|
||||||
axis: "x",
|
|
||||||
});
|
|
||||||
|
|
||||||
// watch
|
|
||||||
|
|
||||||
watch(
|
|
||||||
heymlzElementIsVisible,
|
|
||||||
(newValue) => {
|
|
||||||
if (newValue) {
|
|
||||||
setTimeout(() => {
|
|
||||||
showHeymlzAnimation.value = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
showHeymlzAnimation.value = false;
|
|
||||||
}, 3200);
|
|
||||||
}, 400);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
once: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => clipPathPercent.value,
|
|
||||||
(newValue) => {
|
|
||||||
if (newValue > 80) {
|
|
||||||
activeSlideVideo.value = "right";
|
|
||||||
} else if (newValue < 20) {
|
|
||||||
activeSlideVideo.value = "left";
|
|
||||||
} else {
|
|
||||||
activeSlideVideo.value = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => dragAxisX.value,
|
|
||||||
(newValue) => {
|
|
||||||
const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
|
|
||||||
const percent = clientRect.width / 100;
|
|
||||||
const clipPercent = (newValue + draggableEl.value!.clientWidth / 2 - clientRect.x - 8) / percent;
|
|
||||||
if (clipPercent >= 1 && clipPercent <= 99) {
|
|
||||||
clipPathPercent.value = clipPercent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="container mb-40 lg:mb-40 max-lg:mt-20 lg:-mt-32">
|
|
||||||
<div>
|
|
||||||
<div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
|
|
||||||
<span class="typo-p-sm md:typo-p-md text-slate-500"> مقایسه محصولات </span>
|
|
||||||
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black"> تفاوت محصلات ما را ببینید </span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
ref="previewContainerEl"
|
|
||||||
class="rounded-200 overflow-hidden h-[70svh] relative"
|
|
||||||
>
|
|
||||||
<Transition name="fade">
|
|
||||||
<NuxtImg
|
|
||||||
v-if="activeSlideVideo !== 'right'"
|
|
||||||
:src="homeData!.difreance_section.image1"
|
|
||||||
:class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
|
|
||||||
class="select-none absolute size-full object-cover transition-[filter] duration-250"
|
|
||||||
:alt="homeData!.difreance_section.title1"
|
|
||||||
/>
|
|
||||||
<video
|
|
||||||
v-else
|
|
||||||
autoplay
|
|
||||||
muted
|
|
||||||
playsinline
|
|
||||||
webkit-playsinline
|
|
||||||
src="/video/vid-3.mp4"
|
|
||||||
class="select-none absolute size-full object-cover brightness-[95%]"
|
|
||||||
/>
|
|
||||||
</Transition>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="absolute size-full right-0 w-full"
|
|
||||||
ref="heymlzElement"
|
|
||||||
>
|
|
||||||
<Transition name="fade">
|
|
||||||
<NuxtImg
|
|
||||||
v-if="activeSlideVideo !== 'left'"
|
|
||||||
:src="homeData!.difreance_section.image2"
|
|
||||||
:class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
|
|
||||||
class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
|
|
||||||
:alt="homeData!.difreance_section.title2"
|
|
||||||
/>
|
|
||||||
<video
|
|
||||||
v-else
|
|
||||||
autoplay
|
|
||||||
muted
|
|
||||||
playsinline
|
|
||||||
webkit-playsinline
|
|
||||||
src="/video/vid-3.mp4"
|
|
||||||
class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
|
|
||||||
/>
|
|
||||||
</Transition>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
name="fade"
|
|
||||||
:duration="250"
|
|
||||||
>
|
|
||||||
<NuxtImg
|
|
||||||
v-if="showHeymlzAnimation"
|
|
||||||
src="/img/heymlz/heymlz-pullingg.gif"
|
|
||||||
class="size-[250px] sm:size-[400px] absolute translate-x-[-62px] sm:translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
|
|
||||||
:style="{
|
|
||||||
left: `${clipPathPercent}%`,
|
|
||||||
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</Transition>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
left: `${clipPathPercent}%`,
|
|
||||||
}"
|
|
||||||
:class="[
|
|
||||||
activeSlideVideo !== 'none' ? 'opacity-10' : '',
|
|
||||||
showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black',
|
|
||||||
]"
|
|
||||||
class="select-none w-[5px] sm:w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref="draggableEl"
|
|
||||||
:class="showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black'"
|
|
||||||
class="touch-none cursor-grab hover:scale-115 transition-transform rounded-full absolute size-9 sm:size-11 flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
name="ci:arrows"
|
|
||||||
class="transition-all size-5 sm:size-6"
|
|
||||||
:class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:class="showHeymlzAnimation ? 'opacity-0' : 'opacity-100'"
|
|
||||||
class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="flex flex-col gap-2 text-black transition-opacity"
|
|
||||||
:class="activeSlideVideo === 'right' ? 'opacity-0' : ''"
|
|
||||||
>
|
|
||||||
<span class="typo-p-sm md:typo-p-md">
|
|
||||||
{{ homeData!.difreance_section.description1 }}
|
|
||||||
</span>
|
|
||||||
<NuxtLink
|
|
||||||
:to="homeData!.difreance_section.link1"
|
|
||||||
class="typo-h-6 md:typo-h-5 lg:typo-h-3"
|
|
||||||
>
|
|
||||||
{{ homeData!.difreance_section.title1 }}
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col gap-2 text-black transition-opacity"
|
|
||||||
:class="activeSlideVideo === 'left' ? 'opacity-0' : ''"
|
|
||||||
>
|
|
||||||
<span class="typo-p-sm md:typo-p-md text-end">
|
|
||||||
{{ homeData!.difreance_section.description2 }}
|
|
||||||
</span>
|
|
||||||
<NuxtLink
|
|
||||||
:to="homeData!.difreance_section.link2"
|
|
||||||
class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end"
|
|
||||||
>
|
|
||||||
{{ homeData!.difreance_section.title2 }}
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.overlay-image {
|
|
||||||
clip-path: polygon(v-bind('clipPathPercent + "%"') 0, 100% 0, 100% 100%, v-bind('clipPathPercent + "%"') 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user