Okudunuz mu?
İçindekiler
Kayan yazılar, web sitenize hareketli bir görsellik kazandırarak kullanıcıların dikkatini çekmek ve önemli mesajları vurgulamak için oldukça etkili bir yöntemdir. Bu makalede, internet sitesine kayan yazı eklemenin temel yöntemlerini ve dikkat edilmesi gereken noktaları detaylı bir şekilde ele alacağız.
Kayan Yazı Nedir?
Kayan yazı (marquee), metin veya görsellerin yatay ya da dikey olarak hareket ettirildiği bir tasarım öğesidir. Web sitelerinde genellikle:
- Duyurular,
- Kampanyalar,
- Öne çıkan mesajlar veya
- Bilgilendirme amaçlı kullanılır.
Eskiden HTML’nin marquee etiketiyle sıkça kullanılan bu özellik, günümüzde CSS ve JavaScript ile daha modern ve uyumlu bir şekilde yapılmaktadır.
Kayan Yazı Nasıl Yapılır?
1. HTML ve CSS ile Kayan Yazı
HTML ve CSS kullanarak kayan yazı oluşturmak, modern web siteleri için daha uygundur. İşte basit bir örnek:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kayan Yazı Örneği</title> <style> .kayan-yazi { width: 100%; overflow: hidden; white-space: nowrap; box-sizing: border-box; } .kayan-yazi span { display: inline-block; padding-left: 100%; animation: kaydir 10s linear infinite; } @keyframes kaydir { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } </style> </head> <body> <div class="kayan-yazi"> <span>Web sitenize kayan yazı eklemek çok kolay!</span> </div> </body> </html>Nasıl Çalışır?
.kayan-yazisınıfı, metni taşımak için bir kapsayıcı oluşturur.@keyframesözelliği, metnin soldan sağa veya sağdan sola hareket etmesini sağlar.animationile kayan yazının hızını ve tekrar sayısını ayarlayabilirsiniz.
2. JavaScript ile Kayan Yazı
JavaScript ile kayan yazı daha dinamik hale getirilebilir. Örneğin:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>JavaScript Kayan Yazı</title> <style> #kayanYazi { white-space: nowrap; position: relative; animation: kaydirJS 10s linear infinite; } @keyframes kaydirJS { 0% { left: 100%; } 100% { left: -100%; } } </style> </head> <body> <div id="kayanYazi">Bu bir JavaScript kayan yazı örneğidir.</div> </body> </html>Kayan Yazı Eklerken Dikkat Edilmesi Gerekenler
- Kullanıcı Deneyimi: Çok hızlı veya sık kayan yazılar, kullanıcılar için rahatsız edici olabilir. Yazı hızını ve yönünü dikkatlice ayarlayın.
- Mobil Uyumluluk: Tasarımınızın farklı cihazlarda sorunsuz çalıştığından emin olun.
- SEO Uyumlu İçerik: Kayan yazılarda kullanılan metinlerin arama motorlarına uygun ve anahtar kelime içermesine dikkat edin.
- Erişilebilirlik: Hareketli metinler, görme engelli kullanıcılar için zorluk yaratabilir. Bu nedenle alternatif metinler eklemeyi unutmayın.
Kayan yazılar, doğru şekilde uygulandığında web sitenize dinamik bir görünüm kazandırabilir ve önemli mesajlarınızı öne çıkarmak için harika bir araçtır. Yukarıdaki yöntemlerle kolayca kendi kayan yazılarınızı oluşturabilir ve ziyaretçilerinizin ilgisini çekebilirsiniz.
Unutmayın, aşırı kullanımdan kaçının ve tasarımınızı kullanıcı dostu bir şekilde düzenlemeyi hedefleyin.
BSoylu
Debug ettikçe güzelleşen bir dünya için..
