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
Android