HTML ile Marquee

Merhaba sevgili Webkolog okurları,

Bugün sizlere web sayfalarımıza biraz hareket ve dikkat çekicilik katmanın eğlenceli bir yolunu anlatacağım: kayan yazılar! Özellikle haber sitelerinde ya da duyuruların ön planda olması gereken yerlerde sıkça gördüğümüz bu efektleri, HTML 4.01'in bize sunduğu <marquee> etiketiyle nasıl yapacağımızı keşfedeceğiz. Sayfanızda önemli bir duyuruyu ya da son dakika gelişmesini göz alıcı bir şekilde göstermek istediğinizde <marquee> yardımınıza koşacak!

<marquee> etiketi, içine yazdığınız metni (veya görseli) belirlediğiniz yönde ve şekilde kaydıran özel bir HTML etiketidir. Tarayıcılarda varsayılan olarak desteklense de, W3C standartlarında yer almadığını belirtmekte fayda var. Ancak pratik kullanımı sayesinde birçok geliştirici tarafından hâlâ tercih edilmekte.

Temel Kullanım

En basit haliyle bir kayan yazı oluşturmak için <marquee> etiketinin içine metninizi yazmanız yeterli:

<marquee>Bu bir kayan yazıdır. Dikkatleri üzerinize çekin!</marquee>

Bu kod, varsayılan olarak metninizi sağdan sola doğru sonsuz bir döngüde kaydıracaktır.

Önemli Özellikler: Hareketinizi Özelleştirin

<marquee> etiketinin birçok özelliği var ve bu özellikler sayesinde kayan yazınızın davranışını detaylıca kontrol edebilirsiniz:

• direction: Kayma Yönü

Yazının hangi yöne doğru kayacağını belirler. Alabileceği değerler: left (sol), right (sağ), up (yukarı), down (aşağı).

<marquee direction="right">Bu yazı sağa doğru kayıyor.</marquee>
<marquee direction="up">Bu yazı yukarı doğru kayıyor.</marquee>

• behavior: Kayma Şekli

Yazının kaydığı zaman ne şekilde davrandığını belirler. Alabileceği değerler:

• scroll (varsayılan): Yazı bir kenardan girer, diğerinden çıkar ve tekrar başlar.
• slide: Yazı bir kenardan girer ve diğer kenarda durur, kaymayı bitirir.
• alternate: Yazı bir kenara kadar gider, ardından geri döner ve ileri-geri hareket eder.

<marquee behavior="slide">Bu yazı bir kere kayıp duracak.</marquee>
<marquee behavior="alternate">Bu yazı ileri geri hareket ediyor.</marquee>

• loop: Tekrarlama Sayısı

Kayan yazının kaç kez tekrar edeceğini belirler. Eğer belirtilmezse, sonsuz döngüde çalışır.

<marquee loop="3">Bu yazı sadece 3 kez kayacak.</marquee>

• scrollamount: Kayma Hızı

Yazının kayma hızını piksel cinsinden ayarlar. Değer arttıkça yazı daha hızlı kayar.

<marquee scrollamount="10">Bu yazı biraz daha hızlı kayıyor.</marquee>

• scrolldelay: Kayma Gecikmesi

Her bir kaydırma adımı arasındaki gecikmeyi milisaniye cinsinden belirler. Değer arttıkça yazı daha yavaş kayar.

<marquee scrolldelay="200">Bu yazı oldukça yavaş kayıyor.</marquee>

• width ve height: Boyutlandırma

Kayan yazının içinde hareket edeceği alanın genişliğini ve yüksekliğini belirler. Piksel veya yüzde cinsinden değer alabilir.

<marquee width="300" height="50" style="border:1px solid black;">Kısıtlı alanda kayan yazı.</marquee>

• bgcolor: Arka Plan Rengi

Kayan yazının arka plan rengini belirler.

<marquee bgcolor="#FFFF00">Sarı arka planlı kayan yazı.</marquee>

Kapsamlı Bir Örnek

İşte size ileri geri hareket eden, beş kez tekrar eden ve ortalama hızda kayan bir duyuru örneği:

<marquee loop="5" direction="left" behavior="alternate" scrollamount="5" bgcolor="#E0E0E0">
  <b>DUYURU:</b> Webkolog Yeni Makalelerle Sizlerle! Kaçırmayın!
</marquee>

<marquee> etiketi, web sayfalarınıza dinamik bir hava katmanın basit ve etkili bir yoludur. Özellikle dikkat çekmek istediğiniz kısa duyurular veya güncel bilgiler için oldukça kullanışlıdır. Ancak abartmamaya dikkat edin, çünkü çok fazla hareket kullanıcıların dikkatini dağıtabilir!

Webkolog'u takipte kalın!

Hepinize bol kodlu günler dilerim!