atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-04-21 17:44:39 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #149 from DavidHDev/copilot/fix-flowing-menu-whitespace

Browse Source 
Fix FlowingMenu marquee trailing whitespace on wide screens
This commit is contained in:
David
2026-03-15 13:54:48 +02:00
committed by GitHub
parent 2f96ec7384 7bd8509413
commit d1c65883a4
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/content/Components/FlowingMenu/FlowingMenu.vue
+14 -12
View File
@@ -20,18 +20,20 @@
class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none bg-white translate-y-[101%]"
:ref="el => (marqueeRefs[idx] = el as HTMLDivElement)"
>
<div class="h-full w-[200%] flex" :ref="el => (marqueeInnerRefs[idx] = el as HTMLDivElement)">
<div class="flex items-center relative h-full w-[200%] will-change-transform animate-marquee">
<template v-for="i in 4" :key="`${idx}-${i}`">
<span class="text-[#0b0b0b] uppercase font-normal text-[4vh] leading-[1.2] p-[1vh_1vw_0]">
{{ item.text }}
</span>
<div class="h-full flex" :ref="el => (marqueeInnerRefs[idx] = el as HTMLDivElement)">
<div class="flex items-center relative h-full w-max will-change-transform animate-marquee">
<div v-for="g in 2" :key="`${idx}-g${g}`" class="flex items-center h-full shrink-0">
<template v-for="i in 8" :key="`${idx}-g${g}-${i}`">
<span class="text-[#0b0b0b] uppercase font-normal text-[4vh] leading-[1.2] p-[1vh_1vw_0] whitespace-nowrap">
{{ item.text }}
</span>
<div
class="w-[200px] h-[7vh] my-[2em] mx-[2vw] p-[1em_0] rounded-[50px] bg-cover bg-center"
:style="{ backgroundImage: `url(${item.image})` }"
/>
</template>
<div
class="w-[200px] h-[7vh] my-[2em] mx-[2vw] p-[1em_0] rounded-[50px] bg-cover bg-center shrink-0"
:style="{ backgroundImage: `url(${item.image})` }"
/>
</template>
</div>
</div>
</div>
</div>
@@ -121,6 +123,6 @@ const handleMouseLeave = (ev: MouseEvent, idx: number) => {
}
.animate-marquee {
animation: marquee 15s linear infinite;
animation: marquee 30s linear infinite;
}
</style>