jQuery Scroll Follow (Plugin)

Öncelikle JQuery nedir? Ne değildir? İnceleyelim…

jQuery nedir ve kimler tarafından kullanılıyor?

jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resig tarafından duyurulmuş. Şu anda ise 15 kişilik bir ekip tarafından gelişimi sürdürülüyor. Lisans konusuna da kısaca değinmek gerekirse, MIT veya GPL lisansının şartlarına uyduğunuz sürece kendi uygulamalarınızda kullanabiliyorsunuz. Bu konuda jQuery’nin resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, eğitsellere, eklentilere ve sorularınızı yazabileceğiniz foruma da ulaşabilirsiniz.

jQuery çok geniş bir kullanıcı kitlesine sahiptir. Bunlardan da biraz örnek vermek istiyorum. Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve birçoğumuzun kullandığı blog yazılımı WordPress bu örneklerden yalnızca birkaçıdır. Daha fazlası için jQuery Kullanan Siteler sayfasına bakabilirsiniz.

Kaynak: eburhan

Evet kısaca eburhan’ın jquery tanımlamasına göz attıktan sonra, şimdi gelelim Scroll Follow plugin’i ne işe yarar nasıl kullanılır inceleyelim. Scroll Follow‘un sitesinde nasıl kullanıldığına dair bir açıklama var, şimdi bunu Türkçe olarak burada anlatacağım.

Gereksinimler

• jQuery
• jQuery UI Core
• ve son olarak kullanacağımız eklenti jQuery Scroll Follow

İsteğe Bağlı Olarak

• jQuery Easing Plugin
• jQuery Cookie Plugin indirilerek çeşitli işler için kullanılabilir.

Kurulum

• Öncelikle sayfamıza jQuery kütüphanesini ekliyoruz.
  

  <script type="text/javascript" src="jquery.js"></script>

  1	<script type="text/javascript" src="jquery.js"></script>

• Daha sonra Scroll Follow eklentimizi ve gerekli eklentilerimizi ekliyoruz.
  

  <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="jquery.scrollFollow.js"></script>

  1 2	<script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="jquery.scrollFollow.js"></script>

• Son olarak kaydıracağımız katmanın id’si ile birlikte scrollFollow fonksiyonumuz çağırıyoruz ve katmanımız sayfamız aşağı indikçe kaymaya hazır hale geliyor.
  

  <script type="text/javascript">        $('#exampleId').scrollFollow(); </script>

  1 2 3

  <script type="text/javascript">        $('#exampleId').scrollFollow(); </script>

Be Sociable, Share!

•