Merhabalar,
Css veya Javascript kullanmadan sadece Html ile kayan yazı oluşturabiliyoruz. Çok creative, modern bir görünümü olmasa da içerik türüne göre bir çok sitede karşımıza çıkmış olabilir.
Nasıl yapılır aşamasına gelirsek bunu tek bir Html etiketi ile yapmamız mümkün. Tabii ki css veya Javascript kullanarak kullanım çeşitliliği ve tasarım boyutunu geliştirebilirsiniz. Kullanacağımız Html etiketi marquee olacaktır. Bu etiket bazı attribute (nitelik) değerleri alarak özelleştirilebiliyor.
See the Pen HTML Marquee ile Kayan Yazı by Furkan Giray (@furkangiray_com) on CodePen.
Yukarıda belirli ve en popüler özellikleriyle birlikte marquee elemanının nasıl kullanılabileceğinin bazı örneklerini verdim.
Özetleyecek olursak;
- Direction niteliği farkettiğiniz üzere kayan yazının yönü oluyor. 4 değer alabilir. “left” sola doğru, “right” sağa doğru, “top” yukarıya doğru ve “bottom” aşağıya doğru yön vermekte.
- Behaviour niteliğinin 3 değerini kullandık. “scroll” ekranda kaybolduktan sonra başa dönerken “alternate” ise gittikten sonra geri dönüp aynı işlemi tekrar tekrar yapar. “slide” ise bir kere çalışıp gittiği yerde sabit bir şekilde kalır.
- Kullanılan bir diğer popüler nitelik ise hız değerini ayarladığımız “scrollamount” niteliğidir. Varsayılan değişim hızı 6px olmaktadır. Bu değeri arttırıp veya azaltıp hız değerini özelleştirebilirsiniz.
- marquee ayrıca durdurmak ve başlatmak için Javascript mouseover ve mouseout olaylarını destekler. Bu olaylar, nitelik olarak inline olarak adlandırdığımız şekilde mouseover ve onmouseout yazıp kullanılabiliyor. Resimli örnekte kullanılmıştır.
Açıkçası zorunda kalmadığınız durumlarda Html değil de Css veya Javascript ile animasyonlar oluşturmanızı tavsiye ederim. Yine de basit bir kullanım için marquee ile oluşturmak oldukça kullanışlı olmaktadır. İşinize yaraması dileğiyle.
Mutlu Kodlamalar 🙂
