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

Add shadow to header gsap

Browse Source
This commit is contained in:
marzban-dev
2026-05-02 11:26:19 +03:30
parent 551b1c7915
commit 4f497c97e2
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/Hero.vue
+12 -7
View File
@@ -48,7 +48,7 @@ watch(
() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => [shouldPauseVideos.value, swiper_instance.value?.realIndex],
() => { () => {
updateVideoStates(); updateVideoStates();
} },
); );
// lifecycle // lifecycle
@@ -64,7 +64,7 @@ const initializeGsapAnimation = () => {
{ {
height: "80svh", height: "80svh",
borderRadius: "20px", borderRadius: "20px",
} },
) )
.fromTo( .fromTo(
slidesPerView, slidesPerView,
@@ -74,7 +74,7 @@ const initializeGsapAnimation = () => {
{ {
value: 1.2, value: 1.2,
}, },
"=" "=",
) )
.fromTo( .fromTo(
".header-navbar-item", ".header-navbar-item",
@@ -84,16 +84,18 @@ const initializeGsapAnimation = () => {
{ {
filter: "invert(0%)", filter: "invert(0%)",
}, },
"=" "=",
) )
.fromTo( .fromTo(
"#header-navbar", "#header-navbar",
{ {
boxShadow: "0 10px 15px -3px rgba(0,0,0,0)",
background: "transparent", background: "transparent",
}, },
{ {
boxShadow: "0 10px 15px -3px rgba(0,0,0,0.05)",
background: "white", background: "white",
} },
) )
.fromTo( .fromTo(
"#header-slider-wrapper", "#header-slider-wrapper",
@@ -108,13 +110,14 @@ const initializeGsapAnimation = () => {
}, },
scale: 1, scale: 1,
}, },
"=" "=",
); );
}; };
const resetTimelineForMobile = () => { const resetTimelineForMobile = () => {
gsap.to("#header-navbar", { gsap.to("#header-navbar", {
background: "white", background: "white",
boxShadow: "0 10px 15px -3px rgba(0,0,0,0.05)"
}); });
gsap.to(".header-navbar-item", { gsap.to(".header-navbar-item", {
filter: "invert(0%)", filter: "invert(0%)",
@@ -243,7 +246,9 @@ onUnmounted(() => {
class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full" class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
> >
<Icon <Icon
:name="isMuted ? 'ci:bi-volume-mute-fill' : 'ci:bi-volume-up-fill'" :name="
isMuted ? 'ci:bi-volume-mute-fill' : 'ci:bi-volume-up-fill'
"
class="text-black size-4 md:size-[18px] lg:size-[24px]" class="text-black size-4 md:size-[18px] lg:size-[24px]"
/> />
</button> </button>