Jquery NiceScroll Plugin Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery NiceScroll Plugin Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2586)
RAPOR ET
Bu dersimizde browserlardaki scroll değiştiren bir plugin olan NiceScroll pluginini anlatacağım.En çok kullanılan scroll değiştirme pluginlerindendir.Nedeni ise çok fazla özelleştirmeyi sunuyor olması.Benim ise en sevdiğim kısım ise yumaşak scroll indirmemizi sağladığı için.

NiceScroll normal ve mobil tüm browserlarda çalışmakta.Şimdi plugini inceleyelim.

İncele : http://ustaderslik.com/ornek/nicescroll/

İndir : http://ustaderslik.com/dosya/nicescroll.zip

 $("seçici").niceScroll();

Bu şekilde istediğimiz yere plugini uygulayabiliriz.Bir çok parametresi mevcuttur.Parametrelerini inceleyelim.

cursorcolor : Scrollun rengi.
cursoropacitymin : Scroll hareket etmiyorken ki scroll opacitysi.
cursorwidth : Scroll genişliği.
cursorborder : Scroll çerçeve kalınlığı , tipi , rengi.
cursorborderradius : Scroll kenar yumaşama miktarı.
scrollspeed : Scroll hızı.
mousescrollstep : Scroll adım hızı.
background : Scroll arka plan rengi.
railpadding : Padding miktarları.
smoothscroll : Yumuşak scroll açıp,kapatma.

Parametrelerimiz bu kadar.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.nicescroll.min.js"></script>
<script type="text/javascript">
$(function(){
$("html").niceScroll({
cursorcolor:"#15d4f5",
cursoropacitymin:.2,
cursorwidth:"15px",
cursorborder:"2px solid #f1f1f1",
cursorborderradius:"10px",
scrollspeed:"40",//normal 60
mousescrollstep:"20",//normal 40
background:"#f1f1f1",
railpadding:{top:0,right:5,left:0,bottom:0},
smoothscroll:true
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.kutu{width:100%;height:3000px;margin:auto;background:#fff;text-align:center;color:#000;font-size:200px;}
</style>
</head>
<body>

<div class="kutu">Aşağı doğru in ...</div>

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol