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

Show heymlz for assist the user

Browse Source
This commit is contained in:
marzban-dev
2025-03-27 22:17:14 +03:30
parent c7cd92a5de
commit 1face87b64
1 changed files with 36 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/Preview.vue
+36 -9
View File
@@ -15,6 +15,13 @@ 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"
@@ -22,6 +29,17 @@ const { x: dragAxisX } = useDraggable(draggableEl, {
// watch
watch(heymlzElementIsVisible, (newValue) => {
if (newValue) {
showHeymlzAnimation.value = true;
setTimeout(() => {
showHeymlzAnimation.value = false;
}, 3200);
}
}, {
once: true
});
watch(() => clipPathPercent.value, (newValue) => {
if (newValue > 80) {
activeSlideVideo.value = "right";
@@ -62,7 +80,8 @@ watch(
<NuxtImg
v-if="activeSlideVideo !== 'right'"
:src="homeData!.difreance_section.image1"
class="select-none absolute size-full object-cover 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"
/>
<video
@@ -76,13 +95,14 @@ watch(
/>
</Transition>
<div class="absolute size-full right-0 w-full">
<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="overlay-image select-none absolute object-cover size-full 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"
/>
<video
@@ -97,12 +117,14 @@ watch(
</Transition>
<video
v-if="showHeymlzAnimation"
src="/video/heymlz/heymlz-pulling.webm"
autoplay
muted
playsinline
loop
webkit-playsinline
class="size-[300px] absolute translate-x-[-100px] z-10 top-[32%] -translate-y-1/2"
class="size-[400px] absolute 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))'
@@ -113,18 +135,23 @@ watch(
:style="{
left: `${clipPathPercent}%`,
}"
:class="activeSlideVideo !== 'none' ? 'opacity-10' : ''"
class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center transition-opacity"
:class="[
activeSlideVideo !== 'none' ? 'opacity-10' : '',
showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'
]"
class="select-none w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
>
<div
ref="draggableEl"
class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
: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="**:stroke-white"
class="transition-all"
:class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
/>
</div>
</div>
@@ -135,7 +162,7 @@ watch(
>
<div
class="flex flex-col gap-2 text-black transition-opacity"
:class="activeSlideVideo === 'right' ? 'opacity-0' : ''"
:class="activeSlideVideo === 'right' ? 'opacity-0' : ''"
>
<span class="typo-p-sm md:typo-p-md">
{{ homeData!.difreance_section.description1 }}