Bir çok web master’ın vazgeçilmezleri arasına girmeyi başarmış bir kütüphane olan jQuery ile uygulamalarak yazabilmek için öncelikle web sitesinden son sürümünü indirmelisiniz.Ardından uygun bir klasör açın ve html uzantısına sahip bir boş dosya oluşturun. İndirdiğiniz jQuery dosyasını da bu klasöre taşıyın. Boş dosyanızı not defteri ile açarak aşağıdaki kodu ekleyin.
Bu şekilde kütüphaneyi, efekt uygulaması yapmak istediğimiz sayfamıza dahil ettik.Şimdi öncelikle efekti uygulayacak olan javascript kodlarımızı oluşturalım.
İlk satırda yaptığımız şuydu! Sayfamızda öyle bir html etiketi bulunuyor ki, bu etiketin id parametresi “kutucuk” değeri taşıyor. İşte bu kritere uygun bütün etiketlerin click olayına (yani bu öğeye tıkladığımızda) bir fonksiyon yazdık.İkinci satırda ise çok pratik bir şekilde animasyonlar üretebilmemizi sağlayan “animate” fonksiyonun kullandık. Çalışma şekli ise oldukça basit. İçine uygun bir şekilde yazdığınız tüm komutları, hemen akabinde belirttiğiniz rakamsal değer kadarlık bir süre içine yayarak kademe kademe gerçekleştiriyor. 2500 rakamı 2.5 saniyeye denk düşmektedir.Javascript kısmını tamamladığımıza göre şimdi css detaylarımızı oluşturalım.
Bu kodlar ile animasyon sırasında oluşacak görsel efekti rahat görebilmemiz için (ve tabiiki animasyonun uygulanabilmesi için) çeşitli ayarlar oluşturduk.Sıra uygulamamızın html kodlarını vermeye geldi.
Evet, hepsi bu kadar(cık). Animasyonun çalışabilmesi için, sayfada görmeniz gereken 10×10’luk kutucuğa tıklamanız yeterlidir.Eğer efekti sorunsuz görebildiyseniz şunu da hatırlatmak isterim. Bu gördüğünüz efekti kendiniz sıfırdan yapmaya kalksaydınız (bu yeteneğe ve bilgi birikime sahipseniz ve) en az 100 satırlık javascript kodlaması yapmak zorunda kalırdınız.Ancak ona rağmen bu kadar esnek bir yapı üretebileceğinizin garantisi yine de yoktu…İşte jQuery’nin gücü.. Umarım projelerinizde kullanarak fayda sağlayabilirsiniz.
