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

<script setup lang="ts">

// import

import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";
import useHomeData from "~/composables/api/home/useHomeData";

// state

const { data: homeData } = useHomeData();
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
const swiper_instance = ref<SwiperClass | null>(null);

const observerTarget = ref(null);
const shouldPauseVideos = ref(false);

useIntersectionObserver(
    observerTarget,
    ([entry], observerElement) => {
        console.log(entry.rootBounds ? !entry.isIntersecting : false, "asdad");
        shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
    }
);

const isMuted = ref(true);
const slidesPerView = ref(1);

let gsapTimeline: gsap.core.Timeline;

// methods

const onSwiper = (swiper: SwiperClass) => {
    swiper_instance.value = swiper;
};

const updateVideoStates = () => {
    const activeIndex = swiper_instance.value?.realIndex || 0;
    const videosElements = document.querySelectorAll(`.slide-video`) as NodeListOf<HTMLVideoElement>;
    videosElements.forEach(videoElement => {
        if (videoElement.id === `slide-video-${activeIndex}` && !shouldPauseVideos.value) {
            videoElement.play();
        } else {
            videoElement.pause();
        }
    });
};

// watch

watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
    updateVideoStates();
});

// lifecycle

onMounted(() => {
    updateVideoStates();

    gsapTimeline = gsap.timeline();

    gsapTimeline
        .fromTo(".header-slider-item", {
            borderRadius: 0,
            height: "100svh"
        }, {
            height: "80svh",
            borderRadius: "20px"
        })
        .fromTo(slidesPerView, {
            value: 1
        }, {
            value: 1.2
        }, "=")
        .fromTo("#header-navbar", {
            filter: "invert(100%)"
        }, {
            filter: "invert(0%)"
        }, "=")
        .fromTo("#header-navbar", {
            background: "transparent"
        }, {
            background: "white"
        })
        .fromTo("#header-slider-wrapper", {
            marginTop: "0px",
            scale: 1.025
        }, {
            marginTop: "96px",
            scale: 1
        }, "=")
        .fromTo("#header-slider-pagination-child", {
            padding: "0px 0px"
        }, {
            padding: "0px 80px"
        }, "=")
        .fromTo(".header-slider-item-child", {
            padding: "0px 80px"
        }, {
            padding: "0px 40px"
        }, "=")
        .to(".header-slider-logo", {
            opacity: 0
        }, "-=150%");

    ScrollTrigger.create({
        trigger: "#header-slider-container",
        animation: gsapTimeline,
        scrub: 1,
        pin: true,
        start: "top top",
        // markers: true,
        end: "bottom top"
    });

});

onUnmounted(() => {
    gsapTimeline.progress(1).pause();
    gsapTimeline.kill();
});

</script>

<template>
    <div id="header-slider-container" class="w-full mb-20 z-50">

        <div id="header-slider-wrapper" class="relative">
            <Swiper
                ref="observerTarget"
                :slides-per-view="slidesPerView"
                :loop="true"
                :space-between="40"
                :centered-slides="true"
                @swiper="onSwiper"
            >
                <SwiperSlide
                    v-for="(slide, index) in homeData!.sliders"
                    :key="slide.id"
                >
                    <div
                        class="header-slider-item relative w-full overflow-hidden"
                    >
                        <template v-if="!!slide.video">
                            <video
                                :id="`slide-video-${index}`"
                                :muted="swiper_instance?.realIndex !== index ? true : isMuted"
                                loop
                                class="slide-video absolute inset-0 size-full object-cover brightness-90"
                                :src="slide.video"
                            />
                        </template>
                        <img
                            v-else
                            class="absolute inset-0 size-full object-cover"
                            :src="slide.image!"
                            :alt="slide.title"
                        />
                        <div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
                        <div class="header-slider-item-child absolute z-10 w-full bottom-36">
                            <div class="w-full container">
                                <div class="border-b border-white/10 pb-6 flex flex-col gap-4">
                                    <div class="flex items-center gap-8">
                                        <div
                                            class="hover:scale-110 size-[50px] relative flex items-center justify-center">
                                            <div
                                                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"
                                            >
                                                <Icon
                                                    :name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
                                                    class="text-black"
                                                    size="24px"
                                                />
                                            </button>
                                        </div>
                                        <h3 class="typo-h-1 tracking-[-2px] text-white">
                                            {{ slide.title }}
                                        </h3>
                                    </div>
                                    <div class="flex justify-between items-end">
                                    <span class="typo-p-lg text-white">
                                        {{ slide.description }}
                                    </span>
                                        <Button class="invert rounded-full hover:bg-transparent">
                                            مشاهده
                                        </Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </SwiperSlide>
            </Swiper>
            <div
                id="header-slider-pagination"
                class="absolute w-full left-1/2 -translate-x-1/2 z-100"
                :style="{ bottom : '80px' }"
            >
                <div class="container h-full">
                    <div id="header-slider-pagination-child" class="h-full flex items-center justify-between">
                        <button @click="swiper_instance?.slidePrev()">
                            <Icon
                                class="**:stroke-white cursor-pointer"
                                name="ci:arrow-right"
                                size="24"
                            />
                        </button>
                        <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="border border-white size-3 rounded-full transition-all duration-200"
                                @click="swiper_instance?.slideTo(index)"
                            >
                            </div>
                        </div>
                        <button>
                            <Icon
                                @click="swiper_instance?.slideNext()"
                                class="**:stroke-white cursor-pointer"
                                name="ci:arrow-left"
                                size="24"
                            />
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>