ALLAH (cc)'IN EN GÜZEL İSİMLERİ (ESMA-ÜL HÜSNA)
er - REŞİD

Bütün alemleri dosdoğru bir nizam ve hikmetle akıbetine ulaştıran.
Anasayfa    |     Ben Kimim?    |     Öğrenci İşleri
Web Sayfasına Dalgalı Yazı Ekleme
16.07.2013         (6300) kez okundu    
Tweetle     Yazdır

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:

Dalgalı Yazı Efekti

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


Web Sayfasına YAZDIR Bağlantısı (Yazdır Linki) Ekleme

Web Sayfasında Farenin Sağ Tuş Tıklamasını Kapatma

Web Sayfasına Pencereyi Kapat Butonu Ekleme
© 2008 - 2024
Mustafa KARSLI