ALLAH (cc)'IN EN GÜZEL İSİMLERİ (ESMA-ÜL HÜSNA)
el - METİN

Çok sağlam, pek kuvvetli, güçlü

     ANASAYFA    |   BEN KİMİM?   |   GALERİ   |   ZİYARETÇİ DEFTERİ   |   İLETİŞİM      Ebu Hureyre'nin (r.a.) anlattığına göre: Hz. Peygamber (a.s.) "Müslüman, kardeşinin pazarlığı üzerine pazarlık yapmasın" buyurmuştur. - Müslim, Büyu' 9 (l, 1154)

Web Sayfasına Dalgalı Yazı Ekleme

Web Sayfasına Dalgalı Yazı Ekleme
 + Yazıyı Büyüt    - Yazıyı Küçült           

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

( 2984 ) kez okundu     -     16.07.2013    Tweetle     
Web Sayfasına Dalgalı Yazı Ekleme, Web Sayfasına Dalgalı Yazı Efekti, dalgalı yazı, dalgalı metin, dalgalı metin efekti, dalgalı yazı efekti, dalgalı yazı yazdırma, web sayfasında yazı efekti, yazı efekti, dalgalandırma efekti, dalgalı yazı scripti, javascript yazı efekti, javascript oynayan yazı
Ziyaretçi Yorumları
( 0 ) Yorum
Tümünü Göster
Yorum Ekle
Güvenliğiniz için iP adresiniz kaydedilmektedir. Herhangi bir Hukuki Dava ile karşılaşmamak için hakaret içeren sözler ve argo kelimeler kullanmayınız.
İsim
:
Yorum
:
En fazla 400 karakter
Şehir
:
E-Posta
:
E-Posta adresi Yayınlanmaz
(Güvenliğiniz için ip adresiniz (54.90.92.204) kaydedilecektir)
  Yeni Dersleri Takip etmek İstiyorum. Adresime E-Posta Gelmesini Onaylıyorum.
BENZER YAZILAR
Android
Bilgisayar Ağları
Bilişim Teknolojileri
C Sharp
Çalışmalar
Donanım
Fireworks
Flash - Action Script 3
HTML
JavaScript
Kişisel Gelişim
Okul Öncesi Etkinlik
PHP
Silverlight
Şanlı Tarihimiz
  Zamanlanmış Duyuru/Ödev Bulunmamaktadır...  
Kişisel resim ve yazıları kullanmak yasaktır. Bunun dışındaki dersleri İsim ve Kaynak göstermek şartıyla kullanmak serbesttir.
 Aktif ziyaretçi : 8
 Bugün : 994
 Toplam : 1324140
Mustafa KARSLI - Bilişim Teknolojileri Öğretmeni © 2008 - 2017  
Site Haritası

 

8