mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Typing Uygulaması (Harf Harf Yazdırma)
Jquery kullanarak hazırladığım typing (harf harf yazdırma) uygulamasını da bitirmeyi başardım. Bu yazımda bu uygulamayı nasıl yaptığımı anlatmaya çalışacağım. Uzun zaman önce düşündüğüm ancak tam olarak yapamadığım uygulamayı şuan itibariyle tamamiyle kendi kodlamam ile hazırlamış durumdayım. Bir çok haber sitesinde gördüğüm ve merak ettiğim bir uygulama idi. Bu uygulamada da son günlerde sık sık kullandığım setInterval ve setTimeout fonksiyonlarını kullandım. Umarım hoşunuza gider.

Uygulamamızın kodlarına bakalım. Tamamen kendim hazırladığım uygulamanın html yapısı şu şekilde olacak:

  <div id="baslik">
    <span>Jquery ile Textleri Harf Harf Yazdırma</span>
    <span>Bu uygulamayı da yaptım. ;)</span>
    <span>Geliştirmeye devam.</span>
    <span>Okul da olmasa çok iyi olacak.</span>
    <span>Galatasaray şampiyonluğa gidiyor.</span>
  </div>

Bu yapı için script kodlarımız ise şöyle olmalı:

<script type="text/javascript">
  $(document).ready(function(){
    var i=0, sayac, satir_durum=1;
    var baslik_deger = new Array();
    var adet = $("#baslik span").length, dizi;
    for (var j=1; j <= adet; j++)
    {
      baslik_deger[j] = $("#baslik span:nth-child("+j+")").html();
    }
    $("#baslik span").html("");
    deger_al(1);
    function yaz()
    {
      $("#baslik").html(baslik_deger[satir_durum].substring(0,i));
      i +=1;
      if(i == dizi.length + 1)
      {
        i = 0;
        clearInterval(sayac);
        setTimeout(bekle,1500);
      }
    }
    function bekle()
    {
      $("#baslik").html(baslik_deger[satir_durum]);
      if(satir_durum < adet)satir_durum += 1; else{ satir_durum = "1";} 
      deger_al(satir_durum);
    }
    function deger_al(satir_no)
    {
      dizi = new Array();
      dizi = baslik_deger[satir_no].split('');
      sayac = setInterval(yaz,80);
    }
  });
</script>

Kodlarımız bu şekilde. Örnek uygulamayı ise aşağıda görebilirsiniz.

Jquery ile Textleri Harf Harf Yazdırma Bu uygulamayı da yaptım. ;) Geliştirmeye devam. Okul da olmasa çok iyi olacak. Galatasaray şampiyonluğa gidiyor.

Görüldüğü gibi yine iyi bir uygulama güzel bir çalışma yaptığımı düşünüyorum. Merak ettiğim ve yapmak istediğim uygulamalardan birini daha bitirmiş durumdayım. Ayrıca hazırladığım uygulamalar fonksiyon halinde değil ama zaman içinde bunları fonksiyonel hale getirerek daha kullanışlı yapma amacındayım. Yazılarımda gösterdiğim uygulamalar tanıtım amaçlı diyebilirim. Umarım faydası olur.

İyi çalışmalar!
Mehmet Duran 13 Aralık Cumartesi 2008 7 19174 4,7
Javascript Web Tasarım jQuery Jquery İnternet Benden Tanıtım
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Saydamlık(Opacity) Kullanarak Menü Hazırlama Eğitim Tadında Etkinlik 2009 - Gazi Üniversitesi Ternary Operatör Kullanımı (koşul ? doğru : yanlış) Asp'ye Giriş (Asp Öğreniyorum) Blog Tutmaya Başlayalı 1 Yıl Oldu
Yorumlar
Yorum Yaz
RSS Yorum Takibi
NeverCare 31 Ocak Cumartesi 2009 05:59 #1
Güzel bir çalışma. Ajax desteği ile güzel bir bilgi ekranı yapılabilir. İyi çalışmalar dilerim. macsonuclari . net Admin
tasarımcı 02 Nisan Perşembe 2009 17:07 #2
Üstad. Buradaki textleri veri tabanından çekmeyi de gösterirsen çok sevinirim. Şöyle ki burada harf harf açılan metinsel ifadeler verit tabanından gelsin.
Mehmet Duran 02 Nisan Perşembe 2009 20:47 #3
Diğer yazımda da söyledim. Bu tür uygulamalarda veritabanından gelen verileri repeater veya diğer data kontrolü kullanarak html yapıyı örnekte olduğu gibi oluştururusan sorunsuzca bu uygulamayı kullanabilirsin.
ERKAN 03 Mayıs Pazar 2009 22:20 #4
çalışma kodlarını not defterine ekleyince dağılıyor, editör gibi eklesen daha iyi olur zahmet olmazsa...
Mehmet Duran 03 Mayıs Pazar 2009 22:33 #5
Sorun html olarak kopyalarken yaptığım seçimlerden kaynaklanıyor. Zamanında böyle seçmişim. Bazen benim için de sıkıntı oluyor ama çok problem değil. Sadece satırlar arası boşluk oluyor. O boşlukları silmek fazla süremizi almaz. :) Ya da bu kodlar yerine örnek uygulamayı indirip oradaki kodları kullanmak daha zahmetsiz olur.
Tunahan 02 Mayıs Pazar 2010 16:44 #6
Arkadaşım teşekkürler ama gerekli plugin i vermemişsin kaynak kodundan bulasıya öldüm :D
Mehmet Duran 02 Mayıs Pazar 2010 17:06 #7
Burada paylaştığım kodlar plugin şeklinde değil. Verdiğim kodlar kopyalanıp direk kullanılabilir. Kaynak koduyla boşuna uğraşmışsın. :)
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009