infinite marquee carousel

This is an infinite scroll animation that is often used to display a list of partner company logos in a loop.

Preview

Use Cases & Features

• Public Relations: Show your trustworthiness by displaying a list of sponsor and partner company logos without interruption.
• Visual liveliness: Scroll campaign information and new information in text to attract the user’s attention.
• Infinite Loop: Duplicate and position content and seamlessly loop it with CSS animations to give the illusion of forever scrolling.

Key points of design and UX (Design & UX)

• Smooth scrolling: By using CSS animation, scrolling is smoother and has better performance than JavaScript.
• Pause on Hover: In case the user wants to take a closer look at the content, the animation is paused on mouse hover (animation-play-state: paused).

How to customize (Customization Guide)

• Adjusting speed: You can change the scrolling speed by increasing or decreasing 20s in CSS animation: marquee 20s linear infinite;.
• Change content: You can freely change the logo and text elements.Make sure the contents of the two sets (original and duplicate) are the same.

Implementation code (Implementation)

<div class="w-full overflow-hidden bg-white dark:bg-zinc-950 py-10">
<style>
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
  .animate-marquee:hover {
    animation-play-state: paused;
  }
</style>
<div class="flex w-[200%] animate-marquee gap-8 items-center">
  <!-- First set -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
  <!-- Duplicate set for infinite effect -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
</div>
</div>