Jquery'de kaydırma çubuğu indiğinde resme özellik verme

Merhaba arkadaşlar jquery konusunda kendimi geliştiriyorum.Çok fazla uzatmadan konuya geçeyim.Bu aralar bir sitede gördüğüm kaydırma çubuğu ile aşağı inerken resmin slaytlı bir şekilde kaybolması ve sayfanın başına döndüğümde slaytlı bir şekilde resmin geri gelmesini gördüm ve bunu yapmak için araştırmaya başladım.Bir çok sitede farklı örnekleri vardı.Ancak benim istediğimi tam olarak bulamadım.Bir kaç sitedeki örnekleri inceledikten sonra birleştirdiğim kodları sizlerle paylaşayım birine faydam olur dedim.Şimdi yaptığım uygulamayı sizlere aktarayım.

İlk önce jquery kütüphanemizi bağlıyoruz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Ardından bir div oluşturuyoruz. Divimize class veriyoruz. Ben slide ismin ' i  verdim.

<div class="slide"></div>

Şimdi jquery kodumuza gelelim.

<script>
$(window).scroll(function () {     //kaydırma çubuğu hareket ettiğinde

        if ($(this).scrollTop() > 200) {     //eğer çubuk 200 px aşağıdaysa
            $(".logoline").slideUp();          // slide olan divimizi yukarı doğru animasyonlu bir şekilde kapatıyoruz .
        } else if ($(this).scrollTop() < 200) {   //eğer çubuk 200 px yukarıdaysa
             $(".logoline").slideDown(1300);    // slide olan divimizi aşağı doğru animasyonlu bir şekilde açarız .
        }

    });
</script>

ÖNEMLİ NOT:  Arkadaşlar slideUp() bu parametrenin parantezin içinde açılış kapanış hızını ayarlayabiliriz.

slow: Yavaş
fast: Hızlı
Buraya rakamda yazabiliriz. Mili saniye olarak değerlendirilmektir.
1000 mili saniye =1 saniye

Yeni yazımızı buradan inceleyebilirsiniz