heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change heymlz animations

Browse Source 
Make them responsive
Fix landing loading animation
This commit is contained in:
marzban-dev
2025-04-11 17:57:21 +03:30
parent 04f5b3134f
commit 564e3ebfb4
17 changed files with 146 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Brands.vue
+30 -18
View File
@@ -13,53 +13,65 @@ const {} = toRefs(props);
<template>
<div class="relative w-full flex flex-col justify-center min-h-[450px] h-svh">
<div class="flex-col-center gap-6 mb-32">
<div class="flex-col-center gap-6 mb-24 sm:mb-32 container">
<span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
مجله در ستون و سطرآنچ
</span>
<p class="text-slate-500 text-center max-w-[750px] typo-p-lg xl:typo-p-xl">
<p class="text-slate-500 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
</p>
</div>
<div class="-rotate-z-2 z-20">
<div
class="bg-blue-500 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[140px]"
class="bg-blue-500 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[90px] sm:h-[140px]"
>
<template v-for="i in 10">
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
HEYMLZ
</div>
<NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[45px] invert opacity-85" />
<NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[25px] sm:h-[45px] invert opacity-85" />
</template>
<template v-for="i in 10">
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
HEYMLZ
</div>
<NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[45px] invert opacity-85" />
<NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[25px] sm:h-[45px] invert opacity-85" />
</template>
</div>
</div>
<div class="rotate-z-2 z-10">
<div
class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[140px]"
class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
>
<template v-for="i in 1">
<NuxtImg src="/img/brands/brand-1.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
</template>
<template v-for="i in 1">
<NuxtImg src="/img/brands/brand-1.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
</template>
</div>
</div>
frontend/components/global/LoadingOverlay.vue
+38 -42
View File
@@ -1,52 +1,48 @@
<script lang="ts" setup>
// state
const { $gsap: gsap } = useNuxtApp();
const showLoadingOverlay = useState("showLoadingOverlay");
const disableLoadingOverlay = useState("disableLoadingOverlay");
const shouldRenderLoadingOverlay = ref(true);
const isWindowScrollLocked = useScrollLock(window);
// watch
watch(() => showLoadingOverlay.value, (value) => {
if (!value) {
const timeline = gsap.timeline();
const imageElement = document.querySelector("#loading-overlay-image") as HTMLImageElement;
imageElement.src = "/img/heymlz-loading-2.gif";
timeline
.to("#loading-overlay", {
scale: 1
})
.to("#loading-overlay", {
opacity: 0,
delay: 2,
onComplete: () => {
shouldRenderLoadingOverlay.value = false;
isWindowScrollLocked.value = false;
disableLoadingOverlay.value = true;
}
});
}
}, {
once: true
});
// lifecycle
onMounted(() => {
onMounted(async () => {
const timeline = gsap.timeline();
timeline.to("#loading-overlay", {
opacity: 1,
});
isWindowScrollLocked.value = true;
const newImage = new Image();
newImage.src = "/img/heymlz-loading-2.gif";
});
const preload = (url: string) => {
return new Promise((resolve) => {
const image = new Image();
image.src = url;
image.onload = () => resolve(true);
});
};
await Promise.all([
preload("/img/heymlz/heymlz-fast-loading.gif"),
preload("/img/heymlz/heymlz-pulling.gif"),
preload("/img/heymlz/heymlz-falling.gif"),
preload("/img/heymlz/heymlz-seat.gif"),
]);
timeline.to("#loading-overlay", {
opacity: 0,
delay: 5.5,
onComplete: () => {
shouldRenderLoadingOverlay.value = false;
isWindowScrollLocked.value = false;
disableLoadingOverlay.value = true;
},
});
});
</script>
<template>
@@ -57,19 +53,18 @@ onMounted(() => {
>
<NuxtImg
id="loading-overlay-image"
src="/img/heymlz/heymlz-loading-1.gif"
class="opacity-0 scale-70 absolute z-20"
src="/img/heymlz/heymlz-fast-loading.gif"
class="absolute z-20 w-[700px] brightness-75"
alt=""
/>
<div
<!-- <div
id="loading-overlay-gradient"
class="opacity-0 scale-x-0 w-[1000px] h-[70px] bg-linear-to-r from-blue-500 via-violet-500 to-purple-500 blur-[150px] rounded-[100px]"
/>
/> -->
</div>
</template>
<style>
#loading-overlay-image {
animation-name: loading-overlay-image-animation;
animation-duration: 1s;
@@ -79,7 +74,8 @@ onMounted(() => {
#loading-overlay-gradient {
animation: 1.5s normal 0.5s 1 forwards loading-overlay-gradient-animation,
1s ease-in-out 2s infinite alternate-reverse loading-overlay-gradient-pules-animation;
1s ease-in-out 2s infinite alternate-reverse
loading-overlay-gradient-pules-animation;
}
@keyframes loading-overlay-image-animation {
@@ -117,4 +113,4 @@ onMounted(() => {
scale: 1 1 1;
}
}
</style>
</style>
frontend/components/home/Categories.vue
+5 -5
View File
@@ -20,15 +20,15 @@ const onSwiper = (swiper: SwiperClass) => {
<template>
<section
ref="sectionTarget"
class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
class="flex flex-col justify-center gap-4 bg-black h-[110svh] sm:h-[150svh] relative overflow-hidden"
>
<div class="w-full relative translate-y-[-200px] z-10">
<div class="w-full relative translate-y-[-90px] sm:translate-y-[-200px] z-10 container">
<div class="flex-col-center gap-6">
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
دسته بندی ها
</span>
<p
class="text-slate-300 text-center max-w-[750px] typo-p-lg xl:typo-p-xl"
class="text-slate-300 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و
با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
@@ -38,8 +38,8 @@ const onSwiper = (swiper: SwiperClass) => {
</div>
<div class="w-full my-20 relative">
<img
class="aspect-square w-[450px] translate-[-309px] absolute left-1/2 -translate-x-1/2 z-10"
<NuxtImg
class="aspect-square w-[240px] md:w-[300px] lg:w-[350px] translate-[-164px] md:translate-[-206px] lg:translate-[-240px] absolute left-1/2 -translate-x-1/2 z-10"
:style="{
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
}"
frontend/components/home/Hero.vue
-4
View File
@@ -11,7 +11,6 @@ import useHomeData from "~/composables/api/home/useHomeData";
const { data: homeData } = useHomeData();
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
const swiper_instance = ref<SwiperClass | null>(null);
const showLoadingOverlay = useState("showLoadingOverlay");
const observerTarget = ref(null);
const shouldPauseVideos = ref(false);
@@ -32,9 +31,6 @@ let scrollTrigger: ScrollTrigger;
// methods
const onSwiper = (swiper: SwiperClass) => {
setTimeout(() => {
showLoadingOverlay.value = false;
}, 1000);
swiper_instance.value = swiper;
};
frontend/components/home/Preview.vue
+64 -45
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// import
import useHomeData from "~/composables/api/home/useHomeData";
@@ -17,45 +16,54 @@ const previewContainerEl = ref<HTMLElement | null>(null);
const heymlzElement = useTemplateRef<HTMLDivElement>("heymlzElement");
const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
rootMargin: "0px 0px -40% 0px"
rootMargin: "0px 0px -40% 0px",
});
const showHeymlzAnimation = ref(false);
const { x: dragAxisX } = useDraggable(draggableEl, {
initialValue: { x: 0, y: 0 },
axis: "x"
axis: "x",
});
// watch
watch(heymlzElementIsVisible, (newValue) => {
if (newValue) {
showHeymlzAnimation.value = true;
setTimeout(() => {
showHeymlzAnimation.value = false;
}, 3200);
watch(
heymlzElementIsVisible,
(newValue) => {
if (newValue) {
showHeymlzAnimation.value = true;
setTimeout(() => {
showHeymlzAnimation.value = false;
}, 3200);
}
},
{
once: true,
}
}, {
once: true
});
);
watch(() => clipPathPercent.value, (newValue) => {
if (newValue > 80) {
activeSlideVideo.value = "right";
} else if (newValue < 20) {
activeSlideVideo.value = "left";
} else {
activeSlideVideo.value = "none";
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;
const clipPercent =
(newValue + draggableEl.value!.clientWidth / 2 - clientRect.x - 8) /
percent;
if (clipPercent >= 5 && clipPercent <= 95) {
clipPathPercent.value = clipPercent;
}
@@ -64,10 +72,12 @@ watch(
</script>
<template>
<div class="container">
<div class="container mb-40 lg:mb-80 mt-20">
<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-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>
@@ -80,7 +90,11 @@ watch(
<NuxtImg
v-if="activeSlideVideo !== 'right'"
:src="homeData!.difreance_section.image1"
:class="showHeymlzAnimation ? 'brightness-35' : 'brightness-[95%]'"
:class="
showHeymlzAnimation
? 'brightness-35'
: 'brightness-[95%]'
"
class="select-none absolute size-full object-cover transition-[filter] duration-250"
:alt="homeData!.difreance_section.title1"
/>
@@ -95,13 +109,19 @@ watch(
/>
</Transition>
<div class="absolute size-full right-0 w-full" ref="heymlzElement">
<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-35' : 'brightness-[95%]'"
:class="
showHeymlzAnimation
? 'brightness-35'
: 'brightness-[95%]'
"
class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
:alt="homeData!.difreance_section.title2"
/>
@@ -116,18 +136,13 @@ watch(
/>
</Transition>
<video
<NuxtImg
v-if="showHeymlzAnimation"
src="/video/heymlz/heymlz-pulling.webm"
autoplay
muted
playsinline
loop
webkit-playsinline
class="size-[400px] absolute translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
src="/img/heymlz/heymlz-pulling.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))'
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
}"
/>
@@ -137,28 +152,35 @@ watch(
}"
:class="[
activeSlideVideo !== 'none' ? 'opacity-10' : '',
showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'
showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black',
]"
class="select-none w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
class="select-none w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
>
<div
ref="draggableEl"
:class="showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'"
:class="
showHeymlzAnimation
? 'bg-neutral-300'
: 'bg-black'
"
class="cursor-grab hover:scale-115 transition-transform rounded-full absolute size-11 flex items-center justify-center"
>
<Icon
name="ci:arrows"
size="24"
class="transition-all"
:class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
:class="
showHeymlzAnimation
? '**:stroke-black'
: '**:stroke-white'
"
/>
</div>
</div>
</div>
<div
class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
>
<div
class="flex flex-col gap-2 text-black transition-opacity"
@@ -191,9 +213,6 @@ watch(
</div>
</div>
</div>
<div class="h-80"></div>
</div>
</template>
frontend/components/home/ProductsShowcase.vue
+3 -3
View File
@@ -87,7 +87,7 @@ onUnmounted(() => {
id="products-showcase-container"
class="perspective-midrange relative z-[99999]"
>
<div class="w-full h-[125svh] bg-black">
<div class="w-full h-[102svh] bg-black">
<NuxtLink
v-for="slide in homeData!.show_case_slider"
:key="slide.id"
@@ -118,12 +118,12 @@ onUnmounted(() => {
<NuxtLink :to="slide.link" class="relative">
<NuxtImg
src="/img/heymlz/heymlz-falling.gif"
class="absolute top-[134px] left-1/2 -translate-1/2 w-[250px]"
class="absolute top-[106px] sm:top-[105px] lg:top-[117px] left-1/2 -translate-1/2 w-[250px] drop-shadow-md"
/>
<Button
variant="primary"
end-icon="ci:arrow-left"
class="mt-8 max-sm:hidden max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
class="mt-8 max-sm:py-2 max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
>
مشاهده دسته بندی
</Button>
frontend/plugins/error-handlers.ts
+6
View File
@@ -0,0 +1,6 @@
export default defineNuxtPlugin((nuxtApp) => {
// Also possible
nuxtApp.hook('vue:error', (error, instance, info) => {
// handle error, e.g. report to a service
})
})
frontend/public/img/heymlz/footer-security.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 707 KiB

After

Width:  |  Height:  |  Size: 3.8 MiB

frontend/public/img/heymlz/heymlz-falling.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 477 KiB

After

Width:  |  Height:  |  Size: 722 KiB

frontend/public/img/heymlz/heymlz-fast-loading.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

frontend/public/img/heymlz/heymlz-full-loading.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

frontend/public/img/heymlz/heymlz-loading-1.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 921 KiB

frontend/public/img/heymlz/heymlz-loading-2.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 MiB

frontend/public/img/heymlz/heymlz-loading-3.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 MiB

frontend/public/img/heymlz/heymlz-pulling.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1012 KiB

frontend/public/img/heymlz/heymlz-pulling.webp
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 830 KiB

frontend/public/img/heymlz/heymlz-seat.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 538 KiB

After

Width:  |  Height:  |  Size: 869 KiB