hossein-por-shop/frontend/components/home/Preview.vue

<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 >= 5 && clipPercent <= 95) {
            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>