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

Her ÅŸeyi görüp gözeten, gözetici ve koruyucu olan.

     ANASAYFA    |   BEN KİMİM?   |   GALERİ   |   ZİYARETÇİ DEFTERİ   |   Ä°LETİŞİM      Allah'ım! Beni iyilik iÅŸledikleri zaman sevinen ve kötülük yaptıkları zaman bağışlanma dileyen kullarından eyle. - İbn Mâce, "Edeb", 57

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

( 4812 ) 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 (3.236.156.34) kaydedilecektir)
  Yeni Dersleri Takip etmek istiyorum. Adresime E-Posta Gelmesini Onaylıyorum.
BENZER YAZILAR
Android
Arduino
Bilgisayar Ağları
BiliÅŸim Teknolojileri
C Sharp
Çalışmalar
Donanım
Fireworks
Flash - Action Script 3
Gezdik ve Gördük
HTML
JavaScript
KiÅŸisel GeliÅŸim
Okul Öncesi Etkinlik
PHP
Silverlight
Şanlı Tarihimiz
Yazılarım
  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 : 2
 Bugün : 56
 Toplam : 2275200
Mustafa KARSLI - BiliÅŸim Teknolojileri Öğretmeni © 2008 - 2021  
Site Haritası

 

2