Merhaba Arkadaşlar;

Apple İOs 7 işletim sistemini yayınladığında yeni bir kavram ile karşılaştık Parallax.

Peki ne işe yarıyordu parallax efekti; Telefonu oynattığınız da ön planda yer alan uygulama ikonları sabit kalırken, arka plan hareket ediyordu. Her ne kadar ilk çıktığında insanlar üzerinde bazı sorunlar yaşatsa da[1], güzel bir efekt.



Şimdi biz ne yapacağız konusuna gelelim. Bir sayfa hazırlayacağız burada bir yazı olacak ve arkaplana koyduğumuz resim mouse hareketine göre hareket edecek. Yani diye biliriz ki, mouse hareketine göre resmin hareket etmesini yapacağız.

Bunun için öncelikle JQuery'yi sayfamıza ekleyelim. JQuery'yi sayfanıza eklerken https://code.jquery.com/jquery-3.1.1.min.js linkini kullanabilirsiniz.

Sayfamıza jQuery Linkini ekledikten sonra ise, parallaxEfekti olarak id verdiğimiz bir div tanımlayıp bu div'in style özelliğine ise gerekli atamaları yapacağız. Sonrasında bu div içerisinde başka bir div oluşturup içerisine de yazı yazacağız. Şimdi kodlara geçelim.

Bu yazı burada sabit dururken arkaplan oynayacak. İşte bunun adı parallax.

Şimdi ise JQuery kodlarımızı yazalım;

Bu kodları head taglarının arasına yazabilirsiniz.
Son olarak da kodlarımızı derli toplu verelim;

  
  
  
  
  


    

      

        

Bu yazı burada sabit dururken arkaplan oynayacak. İşte bunun adı parallax.

Sağlıcakla.

Merhaba Arkadaşlar; Jquery ile efektler adlı yazı dizimizin :P sonuna yaklaşıyoruz. JQuery ile bu sefer zincirleme metodlara bakacağız. Bir adet paragraf ve bir adet butonumuz olacak. Butona basılınca paragrafın rengini değiştirip, yavaşça gizleyip ardından da göstereceğiz. Şimdi Kodlarımızı yazalım.

JQuery Kodları script tagları arasına;

$(document).ready(function(){
    $("button").click(function(){
        $("#p1").css("color", "red")
            .slideUp(2000)
            .slideDown(2000);
    });
});

Html Kodları;

div id="p1"
jQuery ile kopuyoruz :) /div
button Tıkla /button

Şimdi ise sonucu görelim.


Sağlıcakla.

Merhaba Arkadaşlar; Bu makalemizin konusu jQuery Callback olacak. Yani bir paragrafı gizleyeceğiz, bu fonksiyon tamamlandıktan sonra ise başka bir işlem sağlatacağız.

$(document).ready(function() {
   $("#gizle").click(function(){
    $("p").hide("slow", function(){
    alert("yazı şu an tamamen kayboldu");
    });
    });
});

p Burada ki yazı siz butona tıkladığınız an kaybolacak ve size bir pencere açılıp tamamem gözükmez olduğunu söyleyecek. /p
button id="gizle" Gizle /button

Sağlıcakla.

Merhaba Arkadaşlar;

Jquery efektler makale serisine 2. bölüm ile devam ediyoruz. Bu sefer makale konumuz hide() ve show() efekleri olacak. Bu makale örneğinde gizle ve göster diye iki tane butonumuz olacak ve tıklandığında  p tagının içine aldığımız metini gizleyip gösterecek. Şimdi uygulamasına geçelim.

 p Burada ki yazı sizin tıkladığınız butona göre gözüküp kaybolacaktır. /p
 button id="gizle" Gizle /button   button id="goster" Göster /button

Önizlemesi;

Sağlıcakla.

Merhaba Arkadaşlar; Bu sefer jQuery ile ilgili bir makale dizisi yazacağım. Bu makaleler ilk başta jQuery'nin efektleri ile ilgili olacak. Kodlar ile burada nasıl çalıştığına bakacağız ve makalede ki kullanılan kodlar ile canlı örneğinin bulunduğu bir link ise makalelerin altında olacak. Şimdi konu ile ilgili olarak kodlarımızı yazalım.
Blogger kaynaklı bir hata sebebiyle kodlar ekran görüntüsü ile koyuldu.



Şimdi kodumuzun Çıktısına bir bakalım;
Buraya tıklayarak canlı örneğine ulaşabilirsiniz.