Bu, genellikle ortak şirket logolarının bir listesini döngü halinde görüntülemek için kullanılan sonsuz kaydırmalı bir animasyondur.

Önizleme

Kullanım Durumları ve Özellikler

• Halkla İlişkiler: Sponsor ve ortak şirket logolarının listesini kesintisiz olarak görüntüleyerek güvenilirliğinizi gösterin.
• Görsel canlılık: Kullanıcının dikkatini çekmek için kampanya bilgilerini ve metindeki yeni bilgileri kaydırın.
• Sonsuz Döngü: İçeriği kopyalayıp konumlandırın ve sonsuza kadar kaydırma yanılsaması vermek için CSS animasyonlarıyla sorunsuz bir şekilde döngüye alın.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

• Sorunsuz kaydırma: CSS “animasyonu” kullanıldığında kaydırma daha sorunsuzdur ve JavaScript’ten daha iyi performansa sahiptir.
• Vurgulandığında Duraklat: Kullanıcının içeriğe daha yakından bakmak istemesi durumunda, fareyle üzerine gelindiğinde animasyon duraklatılır (“animasyon-oynatma-durumu: duraklatıldı”).

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

• Hızı ayarlama: CSS animation: marquee 20s linear infinite; içindeki 20s değerini artırarak veya azaltarak kaydırma hızını değiştirebilirsiniz.
• İçeriği değiştir: Logo ve metin öğelerini özgürce değiştirebilirsiniz.İki setin içeriğinin (orijinal ve kopya) aynı olduğundan emin olun.

Uygulama kodu (Uygulama)

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