Web Sayfasına Dalgalı Yazı Ekleme
Selamun Aleyküm, Merhaba bu dersimde web sayfalarında rahatlıkla kullanabileceğimiz bir dalgalı yazı efektini nasıl yapacağımızı anlatacağım. Dalgalı yazı yapmak için javascript dilini kullanacağız. Javascript kodları web sayfalarında rahatlıkla çalışan dillerdendir. Bu nedenle javascript ile hazırladığımız dalgalı yazı efektini istediğimiz web sayfasına ekleyerek kullanabiliriz.
Öncelikle javascript kodunu hazırlamalıyız. Bu noktada detaya girmeyeceğim. Dalgalı yazı için javascript kodumuz aşağıdadır:
<script language="JavaScript">
var metin = "Mustafa KARSLI - Bilişim Teknolojileri Öğretmeni";
function BoyutDegistir(i,incMethod,textLength)
{
if (incMethod == 1) return (30*Math.abs( Math.sin(i/(textLength/3.14))) );
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function YaziDalgala(text,method,dis)
{
output = "";
for (i = 0; i < text.length; i++)
{
size = parseInt(BoyutDegistir(i +dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
Goster.innerHTML = output;
}
function Dalgalandir(n)
{
YaziDalgala(metin,1,n);
if (n > metin.length) {n=0}
setTimeout("Dalgalandir(" + (n+1) + ")", 180);
}
</script>
Yukarıdaki kodda önemli olan Ekrana yazdıracağımız yazının yazılacağı değişkendir. Javascript kodunun en üstten ikinci satırındaki metin değişkeni efekt vereceğimiz yazımızdır.
Şimdi gelelim bu kodu kısaca web sayfamızda çalıştırmaya;
Javascript kodunu ayrı bir sayfada yazıp javascript dosyası olarak kaydedip sonra web sayfamıza çağırabiliriz. Ama ben tüm kodları web sayfamıza ekleyerek kullanacağım.
Web sayfamızı oluşturuyoruz ve <head> …. </head> etiketleri arasına yukarıdaki javascript kodunu yazıyoruz.
Sonra web sayfamızın <body> etiketini aşağıdaki şekilde yazıyoruz.
<body onload="Dalgalandir(0)">
Bu kodumuz sayfanın yüklenmesinde dalgalandırma fonksiyonumuzu çalıştırıyor. Bunu yazmak yetmez şimdi gelelim javascript içinde tanımladığımız metni nasıl göstereceğiz. Bunun için javascript içinde tanımladığımız “Goster” komutunu kullanacağız.
Aşağıdaki şekilde div oluşturarak id’sine Goster yazıp javascript içinde oluşturduğumuz efekti tarayıcıda göstermiş oluyoruz. Tabi ki div etiketini body etiketinin altında yazacağımızı unutmayalım.
<div ID="Goster" align="center"></div>
Aşağıda örneğin çalışmasının görüntüsünü görebilirsiniz:
Size kolaylık olması açısından tüm web sayfasının kodunu aşağıda veriyorum. Kodu alın ve boş web sayfasına yazın html kaydedin ve çalıştığını görün.
<HTML>
<HEAD>
<script language="JavaScript">
var metin = "Mustafa KARSLI - Bilişim Teknolojileri Öğretmeni";
function BoyutDegistir(i,incMethod,textLength)
{
if (incMethod == 1) return (30*Math.abs( Math.sin(i/(textLength/3.14))) );
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function YaziDalgala(text,method,dis)
{
output = "";
for (i = 0; i < text.length; i++)
{
size = parseInt(BoyutDegistir(i +dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
Goster.innerHTML = output;
}
function Dalgalandir(n)
{
YaziDalgala(metin,1,n);
if (n > metin.length) {n=0}
setTimeout("Dalgalandir(" + (n+1) + ")", 180);
}
</script>
</HEAD>
<BODY onload="Dalgalandir(0)">
<div ID="Goster" align="center"></div>
</BODY>
</HTML>
İlerleyen günlerde yeni derslerde görüşmek üzere sağlıcakla kalınız…
Mustafa KARSLI Kaynak: www.mustafakarsli.com
