korsel tenda tak terbatas

Ini adalah animasi gulir tak terbatas yang sering digunakan untuk menampilkan daftar logo perusahaan mitra dalam satu lingkaran.

Pratinjau

Kasus & Fitur Penggunaan

• Hubungan Masyarakat: Tunjukkan kepercayaan Anda dengan menampilkan daftar logo perusahaan sponsor dan mitra tanpa gangguan.
• Keaktifan visual: Gulir informasi kampanye dan informasi baru dalam teks untuk menarik perhatian pengguna.
• Infinite Loop: Gandakan dan posisikan konten, lalu ulangi secara mulus dengan animasi CSS untuk memberikan ilusi pengguliran selamanya.

Poin-poin penting dari desain dan UX (Desain & UX)

• Pengguliran lancar: Dengan menggunakan animation CSS, pengguliran lebih lancar dan memiliki kinerja lebih baik daripada JavaScript.
• Jeda saat Melayang: Jika pengguna ingin melihat konten lebih dekat, animasi dijeda saat mouse diarahkan (animation-play-state: paused).

Cara menyesuaikan (Panduan Kustomisasi)

• Menyesuaikan kecepatan: Anda dapat mengubah kecepatan pengguliran dengan menambah atau mengurangi 20s dalam animation: marquee 20s linear infinite;.
• Ubah konten: Anda dapat dengan bebas mengubah logo dan elemen teks.Pastikan isi kedua set (asli dan duplikat) sama.

Kode implementasi (Implementasi)

<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>