+
{{ title }}
-
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 6b76e5f..1a6ba3c 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -26,14 +26,17 @@ const onSwiper = (swiper: SwiperClass) => {
>
-
+
دسته بندی ها
@@ -41,9 +44,19 @@ const onSwiper = (swiper: SwiperClass) => {
{
-
+
مشاهده همه دسته ها
diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index aaca471..513ede0 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -5,17 +5,13 @@
import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";
import useHomeData from "~/composables/api/home/useHomeData";
-import type { LoadingOverlayProvideType } from "~/pages/index.vue";
-
-// provide / inject
-
-const { changeLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
// state
const { data: homeData } = useHomeData();
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
const swiper_instance = ref(null);
+const showLoadingOverlay = useState("showLoadingOverlay");
const observerTarget = ref(null);
const shouldPauseVideos = ref(false);
@@ -23,7 +19,6 @@ const shouldPauseVideos = ref(false);
useIntersectionObserver(
observerTarget,
([entry], observerElement) => {
- console.log(entry.rootBounds ? !entry.isIntersecting : false, "asdad");
shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
}
);
@@ -32,11 +27,12 @@ const isMuted = ref(true);
const slidesPerView = ref(1);
let gsapTimeline: gsap.core.Timeline;
+let scrollTrigger: ScrollTrigger;
// methods
const onSwiper = (swiper: SwiperClass) => {
- changeLoadingOverlay(false);
+ showLoadingOverlay.value = false;
swiper_instance.value = swiper;
};
@@ -60,11 +56,7 @@ watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
// lifecycle
-onMounted(() => {
- updateVideoStates();
-
- gsapTimeline = gsap.timeline();
-
+const initializeGsapAnimation = () => {
gsap.to("#header-navbar", {
background: "transparent",
filter: "invert(100%)"
@@ -99,21 +91,33 @@ onMounted(() => {
marginTop: "0px",
scale: 1.025
}, {
- marginTop: "96px",
+ marginTop: () => {
+ const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
+ return `${navbarEl.clientHeight}px`;
+ },
scale: 1
- }, "=")
- .fromTo("#header-slider-pagination-child", {
- padding: "0px 0px"
- }, {
- padding: "0px 80px"
- }, "=")
- .fromTo(".header-slider-item-child", {
- padding: "0px 80px"
- }, {
- padding: "0px 40px"
}, "=");
+};
- ScrollTrigger.create({
+const resetTimelineForMobile = () => {
+ gsap.to("#header-navbar", {
+ background: "white",
+ filter: "invert(0%)"
+ });
+ gsap.set(".header-slider-item", {
+ borderRadius: "20px",
+ height: "450px"
+ });
+};
+
+onMounted(() => {
+ updateVideoStates();
+
+ gsapTimeline = gsap.timeline();
+
+ initializeGsapAnimation();
+
+ scrollTrigger = ScrollTrigger.create({
trigger: "#header-slider-container",
animation: gsapTimeline,
scrub: 1,
@@ -123,6 +127,24 @@ onMounted(() => {
end: "bottom top"
});
+ setTimeout(() => {
+ if (window.innerWidth > 768) {
+ scrollTrigger.enable();
+ } else {
+ resetTimelineForMobile();
+ scrollTrigger.disable();
+ }
+ }, 100);
+
+ window.addEventListener("resize", () => {
+ if (window.innerWidth > 768) {
+ scrollTrigger.enable();
+ } else {
+ resetTimelineForMobile();
+ scrollTrigger.disable();
+ }
+ });
+
});
onUnmounted(() => {
@@ -133,23 +155,30 @@ onUnmounted(() => {
-