Library’leri her gün artarak çoğalan javascript dili ile artık hayal ettiğiniz bir çok efekt ve rutin işlemleri yapması hiç olmadığı kadar kolaylaştı. Üstelik bu geliştirme kütüphaneleri her geçen gün giderek daha gelişkin özellikler eklenerek sürüm atlıyor ve becerileri artıyor.. Ama.. Hiç merak ettiğiniz oldu mu şu tereyağına düşmüş fare gibi kayan div’ler img’lere bu işlevselliği nasıl kazandırabileceğiniz sorusu? Eminim gelmiştir de.. Ama kendinizce cevap verdiğiniz de olmuş muydu? Örneğin basit bir for döngüsü bir html elementin style ailesinden margin-left parametresini sürekli değiştirir ve sayfadaki nesne de bir anda şahlanı verir.. Ama malesef o kadar basit değil.. Ama zor da değil.. Durun hemen bir örnek verelim ve mantığını yordamaya çalışalım.
Sanırım eksiği kalmadı kodların.. Aşağıdaki html kod ile sayfamıza bir resim ekledik ve bu resmin onClick yani tıklanma olayına kaykay isimli fonksiyonumuzu referans verdik. Yani resime tıklanınca kaykay isimli fonksiyonumuz çalışacak. FOnksiyona parametre olarak resmin kendi id parametresini, zaman aşımı aralığını ve kaç pixel kaydıktan sonra duracağını söyledik.. Artık top kaykay’da…kaykay fonksiyonumuz önce kontur değişkeni ile limit değişkenini karşılaştırıyor. Eğer kontur henüz limite eşitlenmemiş ise kendine gelen id isminin, önce sayfadaki buluyor. Ardından bu html öğesinin style ailesinden margin-left parametresine kontur değişkenini px olarak atıyor. Ardından kontur değişkeni 1 arttırılıyor. (1 yerine kaç arttırılacağı bilgisini fonksiyon parametre olarak alır ise çok daha hassas delay ve amount değerlerini dinamik olarak belirleme imkanımız olur..) Daha sonra da javascript ile hazır gelen Timeout fonksiyonu kaykay isimli fonksiyonumuzu bizim belirttiğimiz süre kadar (yani 0,5 saniye veya 500 milisaniye) bekleyip çalıştıracak ve fonksiyon alışık olmadığımız bir şekilde döngüye girmiş olacak.. Peki nasıl çıkacak bu döngüden.. İşte onu if bloğumuzdaki kontur
JavaScript ile Animasyon Üretme Tekniği
