Đây là hoạt ảnh cuộn vô hạn thường được sử dụng để hiển thị danh sách các logo của công ty đối tác theo vòng lặp.

Xem trước

Trường hợp sử dụng & Tính năng

• Quan hệ công chúng: Thể hiện sự đáng tin cậy của bạn bằng cách hiển thị danh sách logo của nhà tài trợ và công ty đối tác mà không bị gián đoạn.
• Hình ảnh sống động: Cuộn thông tin chiến dịch và thông tin mới trong văn bản để thu hút sự chú ý của người dùng.
• Vòng lặp vô hạn: Sao chép và định vị nội dung, đồng thời lặp lại nội dung đó một cách liền mạch bằng hoạt ảnh CSS để tạo ảo giác cuộn mãi mãi.

Những điểm chính của thiết kế và UX (Design & UX)

• Cuộn mượt mà: Bằng cách sử dụng CSS animation, thao tác cuộn mượt mà hơn và có hiệu suất tốt hơn JavaScript.
• Tạm dừng khi di chuột: Trong trường hợp người dùng muốn xem kỹ nội dung hơn thì hoạt ảnh bị tạm dừng khi di chuột (animation-play-state: paused).

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

• Điều chỉnh tốc độ: Bạn có thể thay đổi tốc độ cuộn bằng cách tăng hoặc giảm 20s trong CSS animation: marquee 20s linear infinite;.
• Thay đổi nội dung: Bạn có thể tự do thay đổi các thành phần logo và văn bản.Đảm bảo nội dung của hai bộ (bản gốc và bản sao) giống nhau.

Mã triển khai (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>