Html & Css İle Modern Bir Kayan Yazı Efekti Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Modern bir kayan yazı efekti oluşturmak için karmaşık araçlara ihtiyacınız yoktur. Sadece güncel bir web tarayıcısı (Chrome, Firefox, Edge veya Safari) ve temel bir kod editörü (VS Code gibi) yeterlidir. Projenizi oluştururken HTML5 ve CSS3 standartlarını kullanacağız.

• Kod Editörü: VS Code veya benzeri bir editör.
• Tarayıcı: Geliştirici araçlarını (F12) aktif kullanabileceğiniz modern bir tarayıcı.
• Temel Bilgi: HTML etiket yapısı ve CSS'te "keyframes" mantığına dair temel aşinalık.

Başlamadan önce, çalışma dizininizde bir index.html ve bir style.css dosyası oluşturduğunuzdan emin olun. Bu iki dosya arasındaki bağlantıyı HTML dosyanızın head etiketi içerisine satırını ekleyerek sağlayın.

Adım Adım HTML Yapısını Oluşturma

Kayan yazı efekti için en önemli kural, kayacak içeriği kapsayan bir "konteyner" (container) yapısı oluşturmaktır. Bu yapı, taşan içeriğin gizlenmesini ve sadece belirlenen alan içerisinde hareket etmesini sağlar.

  

    Modern Web Tasarımı 2026 - CSS Animasyonları ile Akıcı Deneyimler 
    Modern Web Tasarımı 2026 - CSS Animasyonları ile Akıcı Deneyimler 
  

Burada neden iki adet span kullandığımızı açıklayalım: Animasyon bittiğinde boşluk oluşmaması için içeriği kendisiyle tekrarlıyoruz. Bu, sonsuz döngü (infinite loop) etkisi yaratmak için en güvenli yöntemdir.

CSS ile Kayan Yazı Efekti Nasıl Kodlanır?

Şimdi sıra, bu içeriği hareketlendirecek olan CSS kodlarını yazmaya geldi. overflow: hidden özelliği, dışarı taşan metinlerin görünmemesini sağlayarak "maskeleme" görevi görür.

.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: #f4f4f4;
  padding: 10px 0;
}

.marquee-content {
  display: inline-block;
  animation: scroll 15s linear infinite;
}

@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

Buradaki @keyframes yapısı, metnin sağdan gelip sola doğru kaymasını sağlar. 15s değeri animasyonun hızını belirler; bu süreyi artırırsanız yazı yavaşlar, azaltırsanız hızlanır.

Performans Odaklı Animasyon Teknikleri

Animasyonların akıcı olması için transform özelliğini kullanmak kritik önem taşır. left veya margin gibi özellikler tarayıcının "layout" (yerleşim) hesaplamasını tetikler ve bu da düşük performanslı cihazlarda takılmalara neden olur. transform ise GPU (grafik işlemci) tarafından işlenir.

.marquee-content {
  display: inline-block;
  animation: scroll 20s linear infinite;
  will-change: transform; /* Tarayıcıya optimize etmesi için ipucu verir */
}

will-change özelliği, tarayıcıya bu öğenin değişeceğini önceden bildirir ve performans optimizasyonu sağlar. Ancak bu özelliği gereksiz yere her öğe için kullanmamalısınız, sadece animasyonlu kapsayıcılar için tercih edin.

Kayan Yazı Yöntemleri Karşılaştırması

Kayan yazı yaparken kullanabileceğiniz farklı yaklaşımları aşağıdaki tabloda inceleyebilirsiniz:

Güvenlik Uyarısı: HTML içerisinde dışarıdan gelen verileri (kullanıcı girdisi) doğrudan innerHTML ile yazdırıyorsanız, XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Verileri her zaman temizleyin veya textContent ile ekleyin.

Sıkça Sorulan Sorular

Kayan yazı hızını nasıl değiştirebilirim?

CSS içerisindeki animation satırında yer alan 15s değerini değiştirerek hızı ayarlayabilirsiniz. Değer ne kadar küçükse, yazı o kadar hızlı akar.

Yazı üzerine gelince durmasını nasıl sağlarım?

CSS ile .marquee-container:hover .marquee-content { animation-play-state: paused; } kodunu ekleyerek kullanıcı fareyi üzerine getirdiğinde animasyonu durdurabilirsiniz.

Mobil cihazlarda yazı çok küçük görünüyor, ne yapmalıyım?

Media query kullanarak @media (max-width: 768px) { .marquee-content { font-size: 14px; } } şeklinde ekran genişliğine göre yazı boyutunu optimize edebilirsiniz.

Sonsuz döngüde boşluk oluşuyor, çözümü nedir?

İçeriğinizi iki kez kopyaladığınızdan ve aralarında boşluk bırakmadığınızdan emin olun. Ayrıca white-space: nowrap özelliğinin doğru uygulandığını kontrol edin.

Bu yöntem SEO'yu etkiler mi?

Hayır, doğru HTML yapısı (anlamsal etiketler) kullanıldığı sürece CSS animasyonları SEO üzerinde olumsuz bir etki yaratmaz.

İleri Seviye Optimizasyon: Donanım Hızlandırma ve GPU Kullanımı

Modern web tarayıcılarında animasyonların akıcı olması, işlemcinin (CPU) değil, grafik işlem biriminin (GPU) yükü üstlenmesine bağlıdır. CSS animasyonlarında transform ve opacity özelliklerini kullanmak, tarayıcının "compositor thread" yapısını tetikleyerek GPU hızlandırmasını devreye sokar.

Kayan yazı efektinizde left veya margin-left gibi mizanpajı (layout) değiştiren özellikler kullanırsanız, tarayıcı her karede "reflow" (yeniden düzenleme) işlemi yapar. Bu da özellikle düşük donanımlı mobil cihazlarda takılmalara neden olur. Bunun yerine translate3d veya translateX kullanmalısınız.

.marquee-container {
  /* GPU hızlandırmayı zorunlu kılmak için */
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

Dinamik İçerik Entegrasyonu ve JavaScript ile Kontrol

Kayan yazı içeriklerini statik HTML yerine bir API üzerinden çekmek, özellikle haber siteleri veya borsa verileri gibi canlı güncellenen platformlar için kritiktir. JavaScript kullanarak DOM elemanlarını yönetebilir ve animasyon hızını kullanıcı etkileşimine göre anlık olarak değiştirebilirsiniz.

Aşağıdaki örnekte, bir JSON kaynağından gelen verinin nasıl kayan yazıya dönüştürüleceği gösterilmiştir:

async function fetchAndRenderMarquee() {
  const response = await fetch('https://api.ornek.com/duyurular');
  const data = await response.json();
  const marquee = document.querySelector('.marquee-inner');
  
  marquee.innerHTML = data.map(item => `${item.text}`).join(' | ');
}

// Animasyon hızını dinamik değiştirme
document.querySelector('.marquee-inner').style.animationDuration = '20s';

Erişilebilirlik (Accessibility) Standartları

Kayan yazılar, hareketli içerik oldukları için görme engelli kullanıcılar veya dikkat dağınıklığı yaşayan bireyler için zorlayıcı olabilir. WCAG (Web İçeriği Erişilebilirlik Yönergeleri) standartlarına uyum sağlamak için şu adımları izlemelisiniz:

• Durdurma Kontrolü: Kullanıcıya hareketi durdurabileceği bir "Pause" butonu mutlaka sunun.
• Azaltılmış Hareket (Reduced Motion): Kullanıcının işletim sistemi ayarlarında "hareketi azalt" seçeneği aktifse, animasyonu CSS ile devre dışı bırakın.

@media (prefers-reduced-motion: reduce) {
  .marquee-inner {
    animation: none !important;
    overflow-x: auto;
  }
}

Yaygın Hata Ayıklama (Debugging) İpuçları

Kayan yazı efektlerinde en sık karşılaşılan sorunlar genellikle "taşma" (overflow) ve "hesaplama" hatalarıdır. Eğer yazınız ekranın dışına taşıyor veya beklenmedik bir yatay kaydırma çubuğu oluşturuyorsa şu kontrol listesini uygulayın:

Sonuç

HTML & CSS ile modern bir kayan yazı efekti yapmak, web projelerinize dinamik bir dokunuş katmanın en temiz yoludur. 2026 yılı itibarıyla, tarayıcıların sunduğu donanım hızlandırma yeteneklerini kullanarak, kullanıcı deneyimini bozmadan bu efektleri uygulayabilirsiniz. Bir sonraki adım olarak, bu kayan yazı içeriklerini bir API üzerinden dinamik olarak çekmeyi veya kayan yazı içerisine etkileşimli bağlantılar eklemeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce farklı tarayıcı sürümlerinde test etmeniz ve güvenlik duvarı (WAF) kurallarınızı gözden geçirmeniz önerilir.