kişisel düşünceler, üstüne bir de teknoloji..

Html’de Marquee Kullanarak Kayan Yazı, Resim Yapma

Web sayfalarımızın bazı kısımlarında yazı ya da resimlerin kayarak geçmesini isteyebiliriz. Bu gibi durumlar için HTML’de bulunan marquee etiketinden faydalanacağız. Bu arada kayan yazıyı hangi resmin ifade edebileceğini bilmediğimden üzerinde ledlerle kayan yazı yazan bir tabelanın resmini koydum yazıya öne çıkarılmış görsel olarak.
Neyse tekrar konumuza dönelim. Diyelim ki Ahmet İşcan yazısını kaydırmak istiyoruz. onun için kullanacağımız kod <marquee>Ahmet İşcan</marquee> şeklinde olacak.

Şimdi konuyla ilgili birkaç örnek yapalım. Örneklerin nasıl çalıştığını görmek için örnek kodların alt kısmında bulunan Demo linklerini kullanmanız yeterlidir.

Örnek 1:

<html>
<head>
<title>Kayan Yazı Ahmet İşcan</title>
</head>
<body>
<marquee>Ahmet İşcan</marquee>
</body>
</html>

Demo

Örnek 2:

Ama gördüğünüz gibi marquee etiketine hiçbir parametre vermezsek sadece sağdan sola kayıyor. Ama biz istersek yazımızın sürekli kaymasını engelleyerek sağa ve sola çarpmasını sağlayabiliriz. Bunun için behavior=”alternate” parametresini eklememiz yeterli.

<html>
<head>
<title>Kayan Yazı ahmetiscan.web.tr</title>
</head>
<body>
<marquee behavior="alternate">ahmetiscan.web.tr</marquee>
</body>
</html>

Demo

Eğer kayan kısmın arkaplanını da değiştirmek istersek kodumuza bgColor=”red” parametresini eklememiz yeterli.

<html>
<head>
<title>Kayan Yazı ahmetiscan.web.tr</title>
</head>
<body>
<marquee behavior="alternate" bgColor="red">ahmetiscan.web.tr</marquee>
</body>
</html>

Demo

Şimdiye kadarki örneklerde metinlerimizi sağa veya sola kaydırıyorduk. Eğer yukarı veya aşağı kaydırmak istiyorsak da direction parametresinden faydalanacağız.

Yukarı doğru kaydırmak için direction=”up” parametresini, aşağı doğru kaydırmak içinse direction=”down” parametresini kodumuza ekliyoruz.

<html>
<head>
<title>Kayan Yazı ahmetiscan.web.tr</title>
</head>
<body>
<marquee direction="up" bgColor="red">ahmetiscan.web.tr</marquee>
</body>
</html>

Demo

Şimdiye kadarki örneklere dikkat ettiyseniz genişlik ve yüksekliği belirlemedik. Kayan kısmın büyüklüğünü belirlemek içinse height(yükseklik) ve width(genişlik) parametrelerinden faydalanacağız.

<html>
<head>
<title>Kayan Yazı ahmetiscan.web.tr</title>
</head>
<body>
<marquee direction="up" bgColor="red" width="100" heigth="800">ahmetiscan.web.tr</marquee>
</body>
</html>

Demo

Metin yerine resim kaydırmak istersek de durum aslında pek farklı değil. Yine marquee etiketinin içerisinde resimleri img etiketiyle ekliyoruz. Tam olarak ne demek istediğimi aşağıdaki örnek koddan anlayabilirsiniz.

<html>
<head>
<title>Kayan Yazı ahmetiscan.web.tr</title>
</head>
<body>
<marquee width="950" height="200" bgcolor="red">
<img src="1.jpg" width="200px" heigth="800px">
</marquee>
</body>
</html>

Demo

Birden fazla resmi de yan yana kaydırmak istersek marquee etiketinin içerisinde birden fazla img etiketi kullanacağız sadece 🙂

4 Comments

  1. samet

    yukarı kaydırma örneği çok işime yaradı, teşekkürler 🙂

  2. ömer faruk

    yararlı bir paylaşım . teşekkürlerrr hocam :))

  3. Samir Rutulec

    Çok teşekkür ederim. HTML kateqorisinde yazıların sayısını çokaltmayı rica ediyorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir