Web sitelerinde ziyaretçilerin dikkatini çekmek için dinamik içerikler önemlidir. Özellikle kayan yazılar, mesajları öne çıkarmak ve sayfaya hareketlilik katmak adına sıkça tercih edilir. JavaScript kullanarak kayan yazı eklemek, site ziyaretçilerine daha dikkat çekici bir deneyim sunmanızı sağlar. Bu makalede, HTML ve JavaScript kodlarıyla modern, koyu temalı bir kayan yazı örneği yapacağız. Ayrıca, kayan yazıların SEO ve kullanıcı deneyimi açısından önemine de değineceğiz.

Kayan Yazıların Avantajları Nelerdir?

Kayan yazılar, sitenize anlık güncellemeler, haberler, promosyonlar ya da dikkat çekici duyurular eklemenin harika bir yoludur. Aşağıdaki durumlarda kayan yazıları kullanmak oldukça avantajlı olabilir:

1. Dikkat Çekmek İçin: Kullanıcıların ilgisini çekmek ve önemli bilgilere hızlı erişim sağlamak için idealdir.
2. Yönlendirme Yapmak: Ürün tanıtımları veya duyurular gibi konularda, kullanıcıları belirli bir sayfaya yönlendirmek için kullanılır.
3. Ziyaretçi Süresini Artırmak: İlgi çekici içerikler kullanıcıların sayfada daha uzun süre kalmasını sağlar.

JavaScript ile Modern Kayan Yazı Oluşturma

JavaScript kullanarak basit ama etkili bir kayan yazı yapabiliriz.

HTML Yapısı

Öncelikle HTML yapısını oluşturalım. Bu yapıda, metni taşıyacak bir kapsayıcıya (container) ve kayan yazıyı uygulayacağımız bir alt kapsayıcıya (inner-container) ihtiyacımız var.

  <div class="scrolling-container">
    <div class="scrolling-text">
      Serdar Karaca | serdarkaraca.com.tr | serdar@serdarkaraca.com.tr
    </div>
  </div>

CSS

   
body {
  background-color: #121212;
  color: #ffffff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.scrolling-container {
  overflow: hidden;
  white-space: nowrap;
  border: 2px solid #ffffff;
  padding: 10px;
  width: 80%;
  position: relative;
}
.scrolling-text {
  display: inline-block;
  padding-right: 50%;
  animation: scrollText 1s linear infinite;
  font-size: 1.5rem;
  color: #f0f0f0;
}
@keyframes scrollText {
  from {
	transform: translateX(100%);
  }
  to {
	transform: translateX(-100%);
  }
}

JavaScript ile Hız Ayarlama ve Metin Değiştirme

JavaScript kullanarak kayan yazının hızını değiştirebilir ve dinamik olarak içerik ekleyebiliriz. Hız kontrolü, animasyon süresiyle bağlantılı olduğundan, CSS animation-duration özelliğini JavaScript ile güncelleyebiliriz.

document.addEventListener("DOMContentLoaded", function () {
	const scrollingText = document.querySelector(".scrolling-text");

	// Hız ayarı için fonksiyon
	function setScrollSpeed(speedInSeconds) {
	scrollingText.style.animationDuration = `${speedInSeconds}s`;
	}

	// Yeni metin ayarlama fonksiyonu
	function updateText(newText) {
	scrollingText.textContent = newText;
	}

	// Hızı 10 saniyeye düşürme ve yeni mesaj ekleme
	setScrollSpeed(10);
	updateText("Serdar Karaca | serdarkaraca.com.tr | serdar@serdarkaraca.com.tr");
});

JavaScript kodlarıyla kayan yazının hızı ayarlanabilir ve gerektiğinde yeni bir mesaj eklenebilir. Bu, sitenizde dinamik içerik sunmanıza yardımcı olur.

SEO İçin Kayan Yazıların Önemi

SEO açısından kayan yazılar, ziyaretçilerin dikkatini çekerek etkileşim oranını artırabilir. Ancak, kayan yazının metin içeriğinin arama motorları tarafından doğru bir şekilde taranabilmesi önemlidir. Bu nedenle, kayan yazıyı metin bazlı bir içerik olarak oluşturmak ve animasyon hızını abartmadan ayarlamak, kullanıcı deneyimi ve SEO açısından olumlu sonuçlar verebilir. Ayrıca, kayma hızının çok yüksek olması kullanıcı deneyimini olumsuz etkileyebilir; bu yüzden dikkatli bir ayar yapmak önemlidir.

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.