jQuery ile Animasyon Yapmak

Bir haftalık bir aradan sonra yeniden merhaba!

Artık blog sayfamda bu zamana kadar alışık olmadığınız, farklı konulara da değinmeye karar verdim. Bundan sonra elimden geldiğince jQuery ile ilgili makalelere yer vermeye çalışacağım, bu konu hakkında detaylı bilgiler vermeye özen göstereceğim. jQuery nedir ne değildir, bununla ilgili bir makale yazmadan evvel bugün okuduğum jQuery ile animasyon yapma ilgili olan bir makalenin çevirisini yapmaya çalıştım, onu yayınlıyorum. İşinize yarayacağını umuyorum. Anlatım hakkındaki sorularınızı yorum olarak ekleyebilirsiniz, elimden geldiğince daha çok detay vermeye çalışırım. Yazıyı alıntı yapmayı düşünürseniz lütfen kaynak göstermeyi ihmal etmeyin.

Yazar: Jeffrey Jordan Way , Çeviri: Mehmet Tahta

Bu konu jQuery kütüphanesinin animasyon özelliği üzerine yoğunlaşmış bir şekilde olacak. İlk başta basit Göster/Gizle metodu üzerinde yoğunlaşacağız, daha sonra da özel animasyon metodlarına geçeceğiz.

Show ve Hide Metodları ne iş yapar?

Belgeniz içerisinde öğeye “Hide()” metodunu uygulamak “none” olarak görüntülenmeye sebep olur. Aşağıdaki CSS ve jQuery parçaları özdeş fonksiyonlardır.

Bu örneği sizin şekillendirebileceğinizden eminim. “Show()” metodu tekrar orijinal görünüme çevirmeye yarar.

Show ve Hide metodları öğeleri canlandırır mı?

Evet veya hayır. Herhangi bir parametre olmadan animasyon olmaz. Fakat, eğer “Show” metodunu uyguladığımızda öğelerin yavaşca görünür olmasını istiyorsak? Bu durumda bunlar için “slow” kelimesini metodumuz içerisine eklemeliyiz. Örneğin..

Bu kod çalıştığında öğe 6 sn içerisinde yavaşça görünür duruma geçecek. Hız parametresi için keyword veya spesifik uzunluk verebiliriz. Bunlar için “slow”, “normal” ve “fast” parametreleri kullanılabilir. (Bu ifadeler sırasıyla 6, 4 ve 3 saniyeyi ifade eder). Alternatif olarak, rakamları kullanarak hızı belirtebiliriz. Aşağıdaki örnekte olduğu gibi:

Bu kod elementin bir saniyede görünür olmasını sağlar, veya 1000 milisaniyede. Şunu unutmayalım, keyword kullandığımızda tırnak işareti  kullanıyoruz. Ancak, spesifik olarak rakamlarla ifade ettiğimizde tırnak işaretini kullanmıyoruz.

“Show()” metoduyla alakalı harikulade bir şey ise aslında bütünüyle dijital kalıp kullanıyor olmamız. Bu metodla saydamlığı değiştirebiliyoruz, aynı zamanda yükseklik ve genişlik değerlerini de. Bir diğer animasyon metoduysa jQuery kütüphanesiyle, diğer taraftan, sadece spesifik özellik belirtmeyle yapılabiliyor.

FadeIn() ve FadeOut()

Fade metodu öğenin sadece saydamlığını değiştirmekle olur. FadeOut() öğenin saydamlığının spesifik periyotlarla azaltılmasıyla, onun tamamen görünmez olması süresince olur (display: none). FadeIn() ise bunun tamamen tersini yapar. Show ve Hide metodlarında olduğu gibi “slow”, “normal” ve “fast” olarak nitelendirebilme imkanımız vardır. Şu örneği inceleyin, ardından kaynağı tekrar gözden geçirin.

İşte burada belgenin hazır konuma geldikten sonra neler yapacağı belirtilmiş. “someId” anchor tagına tıklandığı zaman yavaşça gözden kaybolacak..

slideUp() ve slideDown()

Slide(Kayma) metodları öğenin yüksekliğinin değiştirilmesiyle olur. “slideDown” metodunu kullandığımızda, öğe görünür hale gelecek ve yukardan aşağı doğru belirtilmiş boyuta gelene kadar kayacak. Her zamanki gibi bu parametrede rakamlar veya keyword kullanabiliriz. Diğer örneklerde belirtildiği gibi.

Özel Animasyonlar

Birçok durumda animasyonarınız üzerinde daha büyük bir kontrol sağlamaya ihtiyaç duyarsınız. Bu tip durumlarda çekirdek animasyon sizin ihtiyaçlarınızı karşılamaz. Şimdi biraz daha ileri düzey özel animasyonlar yapmaya değinelim.

Öğeyi sayfa boyunca karşıdan karşıya sürüklemek

Bu basit örnekte öğenin üzerine tıklandığında sayfanın bir ucundan diğerine geçiş yapmasını sağlayacağız. Örneği inceleyin. Boş bir html sayfamızın olduğunu ve “theImage” olarak taglanmış bir imaj olduğunu farzedelim. Öncelikle CSS dosyamızı ayarlamalıyız.

İmajı hareket ettirmek için “left” özelliğini değiştireceğiz. Ancak öğe mutlaka “top”, “left”, “bottom” ve “right” olarak pozisyonlandırılmalıdır. Şimdi jQuery ekleyelim.

İşte burada click event (tıklandığında yapılacak olayı) oluşturuyoruz imajımız için. Ardından da “animate” metodunu kullanıyoruz.

Animasyon metodu için doğru söz dizimi: .animate({property: “value”}, speed, callbackFunction);.

İmajı sağa doğru 3 saniye(veya 3000 milisaniye) içerisinde 400piksel gidecek şekilde ayarladık.

Çoklu Animasyon

Son örneğimiz üzerine biraz çalışma yapalım. Şimdi imajımızın sağa doğru kaymasını ve yüksekliği kadar artmasını istiyoruz. Aşağıdaki örnekteki gibi mi yapmalıyız?

Cevap: Hayır. Eğer yapmak istediğimiz şeye tekrar göz atarsanız imajın sağa doğru kaymasını ve bu işlemin bitmesinin ardından imajın genişliğinin 300px olmasını sağladık. Bu yolla kod doğru bir şekilde yazılmamış oldu, bu kodlarla iki animasyon eş zamanlı olur. Yani imaj sağa doğru kayarken, yüksekliği de aynı anda değişir. Peki biz animasyonlarımıza nasıl “kuyruk”(sıralama) ekleyebiliriz?

Şimdi iki animasyonu ayırmış olduk. Öğenin “width” (yükseklik) kısmı “left” işlemi(sağa doğru kayma) tamamlanmadan değişmeyecek. Bu “kuyruklu animasyon” veya “zincirleme” olarak adlandırılır.

Öğrendiklerimizi Birleştirelim

Örneği inceleyiniz.
Bir sonraki örnekte imaja tıklandığında imajı sağa doğru kaydıracağız ve saydamlığını %10’dan %100’e getireceğiz. Animasyon tamamlandığında imajın 3 saniye içerisinde gözden kaybolmasını sağlayacağız. Öncelikle CSS dosyamızı düzenleyelim.

Öğe, “left” özelliğinin belirtilmesinden sonra nispeten pozisyonlanmaya ihtiyaç duyar. Ayrıca görünümün de yavaşca kaybolmasını istiyoruz, öyleyse aşağıdaki şekilde kullanmamız gerekecek.

.CSS zincirlenemez!

Eğer imaj kaydırılır ve görünür hale getirilirse (saydamlığı arttırılırsa) css dosyamızı şu şekilde düzenlememiz gerekir..

Maalesef istediğiniz cevabı alamayacaksınız. CSS dosyası diğer animasyonların bitmesini beklemeden değişecek. O zaman nasıl zincirleme yapacaksınız? Cevap: “callback” fonksiyonunu kullanarak. İşte gözden geçirilmiş kodumuz.

Callback fonksiyonu, fonksiyonların efektin tamamlanmasının ardından gerçekleşmesini bildirmenizi sağlar. Bunların hepsi jQuery efekt metodlarında belirlenmiştir.

Bu kod “someElement” id’li öğenin bulunmasını sağlar. Bulduğunda, öğenin normal hızda (4 saniye) tüm yüksekliği boyunca kaymasını sağlar. Animasyon tamamlandığında ise fonksiyon harekete geçer.

Çeviri işi gerçekten zor bir iş. Elimden geldiğince titiz olmaya özen gösterdim, umarım anlayabileceğiniz bir anlatım olmuştur. Bundan sonra vakit buldukça bu tarz güzel makaleleri sizlerle paylaşmaya devam edeceğim. Anlatım ile ilgili sorularınız olursa yorum olarak ekleyebilirsiniz, elimden geldiğince yardımcı olmaya çalışırım.

Mehmet.

, , , , , , , , , , ,

  • http://www.nsohbet.com Egemen

    Cok guzel makale , eline sagl

  • EmiN

    çok güzel paylaşım devamınıbekleriz…

  • ahmet

    gerçekten çok başarılı olmuş tebrik ederim özellikle callback lerin ne için gerekli olduğunuz nasıl kullanıclığını burdan öğrendim çok teşekkürler

  • Pingback: renkli teneke » jQuery İçin Türkçe Kaynaklar()

  • Pingback: Etiketlerin ()

  • http://www.aybardumlu.com Aybar

    Teşekkürler, işime yarayan kısmı burada buldum sağolun.

  • http://www.webkutuphanesi.net Koray

    mehmet kardes anlatım çok güzel yararlı meraklı biri olduğum içinde işime çok yarar ama jquer’i bole kullanmadım(hazır kullandım kopyala yapıstır) hiç o yazdığın kodlar hangi taglar arasına yazılıyor bide onu solersen sevınırım şimdiden saol :D

  • http://aokocax.net Oğuz KOCA

    Teşekkürler, özellikle “css callback” açıklaması oldukça işime yaradı.

  • Pingback: JQUERY İle Animasyon Yapmak | ONLINE SCRIPT YUVANIZ - ASP,PHP,C,JS,FLASH,AJAX..()

  • http://www.55hocam.com Selçuk Turan

    örnek sayfalarınız açılmıyor.

  • http://... tamer

    Allah sizden razı olsun. Tuttuğunuz altın olsun

  • http://www.deneke.tr.gg Emrah

    İlk defa “js ve jquery hakkında” bir makale okuyorum fakat, anlatımınız o kadar net ki şimdiden ısınmaya başladım. (: emeğinize sağlık.

  • Gökhan ZER

    En güzel anlatımlı ve anlaşılır makale bu idi. Teşekkürler

    • http://www.hitman.gen.tr/ Mehmet Tahta

      @7a096d4d54eaf10ba2392958f36fd4f7:disqus anlaşılır bulmanıza sevindim. Teşekkürler.

  • iSod

    gerçekten çevirileriniz çok güzel ve anlaşılır. teşekkürler

Powered by WordPress. Designed by WooThemes

%d blogcu bunu beğendi: