Softonic

Kayan Metin Oluşturucu

Adım 1 / 2
Sonraki

Kayan başlıklar; duyuru çubuklarının, borsa ticker’larının ve etkinlik afişlerinin dar bir ekran şeridine çok fazla bilgi sığdırma biçimidir. Bu oluşturucu klasik HTML <marquee> etkisini saf CSS @keyframes ve transform: translateX() animasyonuyla yeniden oluşturur; böylece bu teknik, kullanımdan kaldırılmış etikete gerek kalmadan her modern tarayıcıda çalışmaya devam eder. Bir mesaj seçin, hızı döngü başına saniye olarak ayarlayın, renkleri ve yazı boyutunu belirleyin ve şeridi canlı önizleyin, ardından aşağıda gösterilen CSS ile yeniden oluşturun.

Kayan bir afiş nasıl oluşturulur

  1. 1

    Mesajı yazın

    Başlığı girin. Hareketli bir şeritte en iyi kısa satırlar (4-10 kelime) okunur.

  2. 2

    Hızı seçin

    Daha düşük saniye = daha hızlı kayma. Haber tarzı ticker'lar için tam döngü başına 30-60 sn işe yarar.

  3. 3

    Renkleri ve boyutu belirleyin

    Metin için bir ön plan, şerit için bir arka plan ve başlık yüksekliğinize uyan bir yazı boyutu seçin.

  4. 4

    Canlı önizleyin

    Demo gerçek zamanlı animasyon yapar; böylece yayınlamadan önce okunabilirliği değerlendirebilirsiniz.

  5. 5

    CSS ile yeniden oluşturun

    Aşağıda gösterilen `@keyframes` ve `transform: translateX()` desenini kendi stil sayfanıza kopyalayarak ticker'ı kendi sitenizde yeniden oluşturun.

Neden <marquee> yerine CSS animasyonu

<marquee> etiketi HTML5’te kullanımdan kaldırıldı ve WHATWG tarafından eski olarak işaretlendi. Tarayıcılar şimdilik hâlâ oluşturuyor, ama erişilebilirlik araçları ve doğrulayıcılar şikayet ediyor ve yumuşatma ile döngü üzerindeki ince kontrolü kaybediyorsunuz. overflow: hidden içindeki bir transform: translateX() animasyonu, modern araçlarla aynı görsel davranışı verir.

Hızı ayarlama

Geçiş süresi hem süreye hem de toplam genişliğe bağlıdır. 1200 px’lik bir görünüm penceresi için kabaca bir kural:

Süre His Tipik kullanım
10-20 sn Hızlı, dikkat çekici Flaş indirimler, acil uyarılar
30-45 sn Haber ticker’ı Canlı skorlar, başlık çubukları
60-90 sn Ortam Mekan tabelaları, konferans salonları
120 sn + Neredeyse durağan Dekoratif, lüks marka afişleri

Erişilebilirlik kontrol listesi

  • Ekran okuyucuların mesajı her döngüde yeniden duyurmaması için şeridi role="marquee" ya da aria-live="off" ile sarın.
  • Azaltılmış harekete @media (prefers-reduced-motion: reduce) { animation: none; } ile saygı gösterin ve metni durağan gösterin.
  • Metin ile arka plan arasında kontrast oranını en az 4.5:1 tutun; hareketli metin, durağan metinden daha zor okunur.
  • Kritik bilgileri (yasal uyarılar, fiyatlar, hata mesajları) asla yalnızca kayan bir şeridin içine koymayın.

Sık Sorulan Sorular

Hayır. Önizleme, overflow: hidden içeren bir <div> ve iç span’i translateX ile hareket ettiren bir CSS @keyframes animasyonudur. Modern HTML5 olarak doğrulanır.

Konteynerin hover seçicisine animation-play-state: paused ekleyin. Bazı kullanıcılar bunu sürekli bir döngüden daha rahat bulur.

Evet. @keyframes bitiş değerini translateX(-100%) yerine translateX(100%) yapın ve yönü tersine çevirmek için -100%’ten başlayın. RTL diller için kullanışlıdır.

Hayır. CSS dönüşümleri GPU’da çalışır ve metin DOM içindeki düz HTML’dir, böylece tarayıcı botları onu normal şekilde okur ve animasyon ana iş parçacığını engellemez.

Önizleme sırasında her şey tarayıcınızda kalır. Hiçbir şey yüklenmez ya da kaydedilmez.

İlgili Araçlar

Emoji Kopyala Yapıştır

Sık kullanılan emojilerden oluşan seçkiyi kategoriye göre gezin ve birini yerel olarak kopyalayın. Bu, tam Unicode kataloğu veya metin düzenleyicisi değildir.

Süslü Metin Oluşturucu

Düz metni altı Unicode stiline dönüştürün: daire içine alınmış, tam genişlik, monospace, script, fraktur ve çift çizgili; bio, açıklama ve kullanıcı adları için.

Disleksiye Uygun Metin Dönüştürücü

Yapıştırdığınız metni kısa paragraflar ve yaklaşık 72 karakterlik satırlar hâlinde yeniden düzenleyin. Sonucu istediğiniz belgeye, e-postaya veya editöre kopyalayın.

Kalp simgelerini kopyala

Özenle seçilmiş kalp simgelerini, renkli emojileri ve süslemeli dizileri kopyalayın. Yapıştırmadan önce tam Unicode kod noktalarını görün.

Alan Adı Oluşturucu

Tek bir anahtar kelimeden alan adı fikirleri üretin: altı yaygın TLD'de ön ekler, son ekler, yinelenen harfler ve sayı sonları.

Rastgele İsim Oluşturucu

Dengeli, kısa veya uluslararası isim havuzlarından tek seferde 50 rastgele isim oluşturun. Tam ad, yalnızca ad veya ad artı baş harf seçin.

Araç diğer dillerde mevcuttur