marzban-dev
73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
// brands: string[];
|
|
}
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
const {} = toRefs(props);
|
|
|
|
// state
|
|
|
|
const { $gsap: gsap } = useNuxtApp();
|
|
|
|
// lifecycle
|
|
|
|
onMounted(() => {
|
|
gsap.to("#marquee-text-container", {
|
|
xPercent: -50, // Adjust based on content width
|
|
duration: 10, // Adjust for desired speed
|
|
ease: "none",
|
|
repeat: -1
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full flex flex-col justify-center h-[350px]">
|
|
|
|
<div class="-rotate-z-2 z-20">
|
|
<div
|
|
class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
|
|
>
|
|
<span
|
|
v-for="i in 10"
|
|
class="text-[50px] text-white whitespace-nowrap font-semibold"
|
|
>
|
|
TEST {{ i }}
|
|
</span>
|
|
<span
|
|
v-for="i in 10"
|
|
class="text-[50px] text-white whitespace-nowrap font-semibold"
|
|
>
|
|
TEST {{ i }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rotate-z-2 z-10">
|
|
<div
|
|
class="bg-slate-50 flex pr-20 gap-20 py-2 w-max animate-marquee"
|
|
>
|
|
<span
|
|
v-for="i in 10"
|
|
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
|
|
>
|
|
TEST {{ i }}
|
|
</span>
|
|
<span
|
|
v-for="i in 10"
|
|
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
|
|
>
|
|
TEST {{ i }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template> |