Tayfun Erbilen

Sizlere perfectScrollbar adında bir jquery scrollbar eklentisini tanıtacağım.. Uzun zamandır kendi projelerimde kullanıyorum, jquery ile özel scrollbar yapmak isteyenler için ideal bir eklenti.

Öncelikle eklentiyi şuradan indirebilirsiniz.. İçerisinde src klasörü altında bize lazım olacaklar bulunuyor.. Bunlar;

• jquery.mousewheel.js
• perfect-scrollbar.js
• perfect-scrollbar.css

Nasıl kullanacağız?

İlk olarak jquery kütüphanesi lazım tabi, bunu söylememe gerek yok ???? Bir html oluşturalım hemen..

<div id="content">
 … içerik …
</div>

Basitte bir css yazalım. CSS’de olması gerekenler overflow: hidden ve position: relative bunları koymayı unutmayın ????

.content {
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
}

Ve tabi ki eklentiyi kullanmaya geldi sıra..

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="perfect-scrollbar/jquery.mousewheel.js"></script>
 <script src="perfect-scrollbar/perfect-scrollbar.js"></script>
 <link href="perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function(){
      $('#content').perfectScrollbar();
 });
 </script>

İsterseniz parametrelerde kullanabilirsiniz.. Örneğin scroll hızını ayarlayabilirsiniz.. Ya da scroll’un sadece x ya da y ekseninde çıkmasını sağlayabilirsiniz..

$('#content').perfectScrollbar({
	suppressScrollX: true,
	wheelSpeed:100
});

Nesneye yeni içerikler eklendiğinde scroll’u update etmek içinse şu şekilde bir kullanım gerekiyor;

$("#content").scrollTop(0);
$("#content").perfectScrollbar('update');

Bir nesne düşünün.. Ve bu nesneye göre fare nesnenin neresinde kalıyor, bunu öğrenmemiz gerek.. Temelde 9 farklı konumu hesaba katarak küçük bir eklenti hazırladım.. Eklenti nesneye göre farenin 9 farklı konumunu tespit edip bir şeyler yapmanızı sağlıyor.

Nesneye göre konumlar:

• Yukarı
• Aşağı
• Sol
• Sağ
• Yukarı Sol
• Yukarı Sağ
• Aşağı Sol
• Aşağı Sağ
• Orta

İndir (Github)

https://github.com/tayfunerbilen/cursorWatcher

Bazı tasarımlarda yazıların gradient renkleri oluyor. Bunu css’e dökerken ya imaj olarak alıyoruz ya da tek renk ile yapıyoruz. Ancak bir jquery eklentisi sayesinde yazılara kolayca gradient renk verebileceğiz. Benim çok işime yaradı, eminim sizinde işinize yarayacaktır ????

Web adresi: http://www.codefocus.ca/goodies/gradienttext

Nasıl kullanılır?

jQuery kütüphanesini ve eklenti dosyasını sayfaya çağırdıktan sonra elemanı seçip uygualamak kalıyor geriye.. İşte çalışır bir örnek;

$('#text').gradienttext({
	colors: ['#FFF', '#CCC', '#111'],
	style: 'vertical'
});

Dilerseniz style parametresini horizontal yaparak yatay şekilde de gradient verebilirsiniz. Ne kadar renk kodu yazmak isterseniz o kadar belirtebilirsiniz colors parametresinde.