Bu dalgalanan yazı efektini bir javascript sitesinde gördüm. Yaratıcısı David Gardner isimli birisi. Ben biraz değiştirdim, Türkçeleştirdim ve fonksiyon sayısını azalttım.
Efektin analizini yapalım: Metindeki yazılar 50 milisaniyelik aralıklarla büyüyor ve küçülüyor. Bu büyüme ve küçülme işlemi ardışık olduğu için bir dalgalanma hareketi oluşuyor.
Metnin harflerini büyütüp küçültmek için <font size=”…”> komutundan yararlanıyoruz. HTML derslerinde gördüğümüz gibi size özniteliÄŸi 1′den 7′ye kadar deÄŸer alıyordu. Bir harf 50 milisaniye aralıklarla 1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 2, 1, 2, 3… gibi yükselip alçalan deÄŸerler alarak dalgalı ÅŸekilde büyüyüp küçülmeli. Hemen sağındaki harf de bir adım geriden takip etmeli.
Bu dalgalanmayı sağlamak için başka bir çok yol bulabilirsiniz. Ben, David Gardner gibi mutlak değer sinüs fonksiyonunu kullanacağım. Lise matematiğinden hatırlayacağınız üzere sinüs fonksiyonu 1 ve -1 ekstrem değerleri arasında bir dalga grafiğine sahiptir. Negatif değerler işimize yaramayacağından dolayı; mutlak değer sinüs fonksiyonu kullanarak 0 ile 1 arasında bir dalgalanma oluşturuyoruz. (aslında dalgalanmadan çok ardısıra dizilen tepeciklere benzer.)
Bilmeniz Gereken Komutlar:
deÄŸiÅŸken.length
değişken.substring(ilk harfin sırası, son harfin sırası)
setTimeout(komut, süre)
Math.abs(sayısal ifade)
Math.sin(radyal cinsinden sayısal ifade)
parseInt(sayısal ifade)
Â
Çözüm:
<html>
<head>
<title>Karakter sayısı</title>
Â
<script language=”JavaScript”>
var metin = “Büyük Altay”;
Â
function Dalgala(n)Â
{ Â Â
Boyutla(metin,n);
if (n > metin.length) {n=0}
setTimeout(“Dalgala(” + (n+1) + “)”, 50);
}
Â
function Boyutla(yazi,sayi)
{
son_hal = “”;
for (i = 0; i < yazi.length; i++)
{
font_degeri = parseInt(72*Math.abs( Math.sin((i+sayi)/(yazi.length/3.14))) );
son_hal += “<font style=’font-size: “+ font_degeri +”pt’>” +yazi.substring(i,i+1)+ “</font>”;
}
katman.innerHTML = son_hal;
}
Â
</script>
</head>
<body onload=”Dalgala(0)”>
<div id=”katman” align=”center”>
</div>
</body>
</html>
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.