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

Bu muazzam kâinatı tek başina idare eden.

     ANASAYFA    |   Ben Kimim?      İnsanların hesaba çekilmeleri yaklaştı. Halbuki onlar gaflet içinde yüz çevirmekteler. - Enbiya-1

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

( 6275 ) 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 (34.205.246.61) kaydedilecektir)
  Yeni Dersleri Takip etmek istiyorum. Adresime E-Posta Gelmesini Onaylıyorum.
BENZER YAZILAR
Android
Arduino
Bilgisayar Ağları
biliMKurdu
Bilişim Teknolojileri
C Sharp
Çalışmalar
Donanım
Evde Deney
Fireworks
Flash - Action Script 3
Gezdik ve Gördük
HTML
JavaScript
Kişisel Gelişim
Okul Öncesi Etkinlik
PHP
Projeler
Raspberry Pi
Scratch
Silverlight
Şanlı Tarihimiz
Yarışmalar
Yazılarım
  Zamanlanmış Duyuru/Ödev Bulunmamaktadır...  
De ki: "Rabbim! Bağışla, merhamet et. Çünkü sen merhamet edenlerin en hayırlısısın!"

Mü'minûn, 23/118
Sosyal Medya Hesabım Bulunmamaktadır. Bu nedenle başka platformlarda paylaşımım 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 : 3
 Bugün : 42
 Toplam : 2657764
Mustafa KARSLI - Bilişim Teknolojileri Öğretmeni © 2008 - 2024  
Site Haritası

 

3