Kayan Yazı Nasıl Yapılır?

Web sitelerinde sıkça kullanılan, özellikle güncel haberler veya güncel duyurular gibi alanlarda gördüğümüz kayan yazı sistemini web sayfalarımıza eklemek oldukça kolaydır.

Bu örneğimizde tagını kullanarak kayan yazı sistemini nasıl yapacağımızı göreceğiz...


1. Aşama

Kaydırmak istediğimiz alanı oluşturularım.

Kaydırmak istediğiniz alanı oluştururken her hangi bir kısıtlamanız yoktur. Bu alan bir tablodan da oluşabilir, resimden de oluşabilir yada sadece basit bir yazıdan da oluşabilir.

Bu örnekte ben kayan alan olarak basit bir yazı kullanacağım... Kayan yazı için kullanacağımız metin "Web de ders öğrenmenin tadını çıkartmak için sizde sitemizi ziyaret edin...www.webders.com"...


2. Aşama

Belirlediğimiz alanı kaydırmaya başlayalım.

Kaydırmak istediğimiz alanı oluşturduktan sonra kaydırma işlemini gerçekleştirebilmek için tagını kullanıyoruz...

Kısaca özetlersek kodumuz şu şekilde olmalı:
kaydırılacak içerik

Şimdi olayımızı biraz daha geliştirelim. Hareket hızını ayarlamak için marquee tagının scrollamount özelliğini kullanıyoruz...
kaydırılacak içerik

Kaydırılacak alanın boyutlarını ayarlamak için width ve height özelliklerini kullanıyoruz...
kaydırılacak içerik

Ve son olarak mouse ile bu alana girdiğimiz hareketin durmasını, mouse un bu alandan çıkması halinde ise harekete devam etmesini sağlayalım...
kaydırılacak içerik

Sonuç olarak kodumuz aşağıdaki gibi olmalıdır...


<marquee direction="up" scrollamount="1" width="200" height="100" onMouseOver="stop()" onMouseOut="start()">kaydırılacak içerik</marquee>



Ve Sonuç...
Artık bizimde bir Kayan Yazımız var!
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 13 yıl önce
güzel bişey paylaşım için teşekkür ederim
• 13 yıl önce
ya hocam sanalkursun altındaki gibi saga sola kaydırmak için ne yapmalıyız:sasir:
• 13 yıl önce
Sağa sola kaydırmak için kodda direction kısmında "up" yerine "right" yada "left" yazman yeterli...
• 13 yıl önce
hocam bu kod sadece ie için geçerli mesela firefox ile de nasıl uyumlu hale getiririz...
• 12 yıl önce
süper saolasın adaş abi
• 12 yıl önce
Ne diyim size ki!!! Durdurmayı kadar aradım ki. Burnumun dibindey miş :D
• 12 yıl önce
teşekkür ederim. Bilginin zekatı da başkalarına öğretmekmiş. Bol bol zekat vermeniz dileğiyle:)
• 12 yıl önce
cok güzel teşekürleer benim buraya rastlamam ii olmuş:-dusun:
• 12 yıl önce
bu kodları ayrı bir sayfada çalıştırdığımda sorun çıkmıyor falat kendi sayfama eklediğimde çalışmıyor:S
• 12 yıl önce
bu kodları ayrı bir sayfada çalıştırdığımda sorun çıkmıyor falat kendi sayfama eklediğimde çalışmıyor:S
• 12 yıl önce
Firefox'da da sorunsuz çalışması için css ile iç içe kullanmayı deneyin, özellikle up/down için firefox çok fazla sorun çıkartıyor (yükseklik belirtince özellikle). Onun yerine css'de yükseklik belirtmek sorunu çözüyor. Çok araştırdım bunun çözümünü ve her şeyin css'de saklı olduğunu gördüm =) (yauv bu güvenlik kodu bazen doğru girilse bile yanlış diyor!)
• 12 yıl önce
html'e yeni başlayanlar için güzel kaynak teşekkürler ...
• 12 yıl önce
ders böyle anlatılır tesekkürler hocam
• 12 yıl önce
yaa uyguladım süper :D:-dusun::kirp:
• 12 yıl önce
Teşekkürler, işime çok yaradı:D
• 11 yıl önce
dehşetül vahşet :D
• 11 yıl önce
evet anlatım güzel ve sade anlamaya baslıyorum bunları bır blogta denemek lazım bır gun boyunca aslında html kodları cok basıt ama once kodları ezberlemek lazım sonrada uygulamak tesekur adamım güzel olmuss...:hayret:
• 11 yıl önce
Bu kodu mantığınızı ve hayal gücünüzü zorlayarak geliştirebilirsiniz. Mesela: <html><head><body><table border=0 height=500 width=300><tr><td><marquee direction=left behavior=alternate><marquee direction=up behavior=alternate >HaCk TURK RuLéTi TéaM bY iskeltan</marquee></tr></td></table></body></head></html> bunu kopylayıp notepad'da formatını değiştirip bakın. Ben burada tablo kullandım yazının gieceği yerleri sınırlamak için. Ama bu sınırlamayı marquee için de kullanabilirsiniz. Bu html programlama-tasarım vs. bunların başı. Bu html'yi öğrenerek programlama mantığınızı geliştirip daha sonra C# C++ Java gibi programlama dillerinde zorluk fazla çekmezsiniz sanırım. Sagılarla bY İskeltan..
• 10 yıl önce
Allah razı olsun :D
• 9 yıl önce
süpersiniz

Yukarı Git