Marquee

Marquee.astro

---
const { title, bgColor, textColor } = Astro.props;
---

<div class={`marquee-container w-full ${bgColor || `bg-rosso`} lg:py-[1.111vw] py-[12px] overflow-hidden whitespace-nowrap relative`}>
  <div class="marquee-content inline-flex lg:gap-[1.667vw] gap-[24px]">
    <h5 class={textColor || `text-nero`}>{title}</h5>
    <h5 class="text-bianco">Promo del momento!</h5>
    <h5 class={textColor || `text-nero`}>{title}</h5>
    <h5 class="text-bianco">Promo del momento!</h5>
    <h5 class={textColor || `text-nero`}>{title}</h5>
    <h5 class="text-bianco">Promo del momento!</h5>
  </div>
</div>

<style>
  .marquee-container {
    position: relative;
    overflow: hidden;
  }

  .marquee-content h5 {
    margin-right: 1.667vw;
  }

  @media screen and (max-width: 768px) {
    .marquee-content h5 {
      margin-right: 24px;
    }
  }
</style>

<script>
  import gsap from "gsap";

  document.addEventListener("astro:page-load", () => {
    const marqueeContent = document.querySelector(".marquee-content");

    if (!marqueeContent) return;

    const marqueeClone = marqueeContent.cloneNode(true);
    marqueeContent.parentElement.appendChild(marqueeClone);

    gsap.to(".marquee-content", {
      xPercent: -100,
      ease: "none",
      duration: 20,
      repeat: -1
    });
  });
</script>

index.astro

---
import Marquee from "../component/Marquee.astro";
---
 <Marquee title={fine_promo} />