Geri Dön

Kayan Haber Bandı (Ticker)

Havalı Animasyonlar / 3 Görüntülenme

Favoriye Ekle

Canlı Önizleme

🔴 CANLI
⚡ Unity 6.1 yayınlandı 🎮 Yeni oyun rehberleri eklendi 🚀 CSS kütüphanesi güncellendi 💡 Günlük ipucu: Rigidbody.AddForce vs Impulse ⚡ Unity 6.1 yayınlandı 🎮 Yeni oyun rehberleri eklendi 🚀 CSS kütüphanesi güncellendi 💡 Günlük ipucu: Rigidbody.AddForce vs Impulse

Nasıl Kullanılır?

İçerik miktarını 2'ye çarpmanız (aynı içeriği tekrar yazmanız) sonsuz döngü için şarttır. Hız için 'animation' süresini azaltın (daha kısa = daha hızlı).

Kaynak Kodlar

HTML

<div class="ticker-wrapper">
  <div class="ticker-label">🔴 CANLI</div>
  <div class="ticker-track">
    <div class="ticker-items">
      <span>⚡ Unity 6.1 yayınlandı</span>
      <span>🎮 Yeni oyun rehberleri eklendi</span>
      <span>🚀 CSS kütüphanesi güncellendi</span>
      <span>💡 Günlük ipucu: Rigidbody.AddForce vs Impulse</span>
      <span>⚡ Unity 6.1 yayınlandı</span>
      <span>🎮 Yeni oyun rehberleri eklendi</span>
      <span>🚀 CSS kütüphanesi güncellendi</span>
      <span>💡 Günlük ipucu: Rigidbody.AddForce vs Impulse</span>
    </div>
  </div>
</div>

CSS

.ticker-wrapper {
  display: flex; align-items: center; background: #0d0f1a;
  border: 1px solid rgba(255,71,87,0.4); border-radius: 8px;
  overflow: hidden; width: 100%; max-width: 500px; font-family: 'Inter', sans-serif;
}
.ticker-label {
  background: #ff4757; color: #fff; padding: 10px 16px;
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  white-space: nowrap; flex-shrink: 0;
}
.ticker-track { overflow: hidden; flex: 1; }
.ticker-items {
  display: flex; gap: 60px; width: max-content;
  animation: ticker-scroll 20s linear infinite;
}
.ticker-items span {
  color: #e0e0f0; font-size: 14px; white-space: nowrap; padding: 10px 0;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-wrapper:hover .ticker-items { animation-play-state: paused; }