AntiScroll.js – X Lion benzeri kaydırma çubukları

Chrome web tarayıcısı kullananlar bilirler son güncellemeden sonra hepimizin alışık olduğu klasik kaydırma çubuklarının yerine daha ince ve değişik kaydırma çubukları geldi. Tabi sadece Chrome üzerinde bu değişiklik oldu. Diğer tarayıcılar hala eski klasik görünümü kullanıyorlar. Bunun öncesinde Facebook ve X Lion işletim sistemlerinde değişik stillerde scrollbar örnekleri yapılmıştı. En büyükler birşeyler yaptığı zaman geliştiriciler de bunlardan ilham alıp benzerlerini üretiyorlar herkesin kullanabilmesi için.

AntiScroll.js uygulaması  IE7+, Firefox 3+, Chrome, Safari, Opera tarayıcıları ile uyumlu ve hepsinde aynı görüntüyü almayı sağlayan  Guillermo Rauch tarafından yapılmış scrollbar değiştirme uygulamalarından bir tanesidir. Şu an için verdiğim demo örneği biraz problemli ama download butonundan indireceğiniz son sürüm olduğu için herhangi bir problem bulunmuyor. Demo örneğini incelerseniz eğer hover yani mouse üzerine geldiğinde değişme özelliği de olduğunu görebilirsiniz. Hover esnasında renk siyah oluyor ve geri çektiğinizde de şeritler kayboluyor. Mouse tekerleği ile döndürme ve touchpad benzeri aygıtlarla da kullanılabilir.

Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

Js ve stil dosyaları :

    <script src="deps/jquery.js"></script>
    <script src="deps/jquery-mousewheel.js"></script>
    <script src="antiscroll.js"></script>
    <link href="antiscroll.css" rel="stylesheet" />

Demo sayfasındaki stil kodları :

    <style>
      body {
        padding: 80px 100px;
        font: 14px/1.4 'helvetica neue', helvetica, arial, sans-serif;
      }

      h1 {
        font-size: 28px;
      }

      .box {
        background: #eee;
      }

      .box, .box .antiscroll-inner {
        width: 250px;
        height: 250px;
        font: 14px Helvetica, Arial;
      }

      .box-wrap {
        margin: 20px 40px;
        border: 1px solid #999;
      }

      .box-inner {
        background: #eee;
        padding: 10px;
        color: #999;
        text-shadow: 0 1px 0 #fff;
      }

      .button {
        -webkit-user-select: none;
        display: block;
        background: #3b88d8;
        text-decoration: none;
        background: -o-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
        background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
        border-top: 1px solid #4081af;
        border-right: 1px solid #2e69a3;
        border-bottom: 1px solid #20559a;
        border-left: 1px solid #2e69a3;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
        border-radius: 16px;
        -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        color: #fff;
        font-family: "lucida grande", sans-serif;
        font-size: 11px;
        font-weight: normal;
        line-height: 1;
        padding: 3px 0 5px 0;
        text-align: center;
        text-shadow: 0 -1px 1px #3275bc;
        width: 112px;
        -webkit-background-clip: padding-box;
      }

      .button:hover {
        background: #2a81d7;
        background: -o-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
        background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
        border-top: 1px solid #2a73a6;
        border-right: 1px solid #165899;
        border-bottom: 1px solid #07428f;
        border-left: 1px solid #165899;
        -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
        -webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
        cursor: pointer;
        text-shadow: 0 -1px 1px #1d62ab;
        -webkit-background-clip: padding-box;
        text-decoration: none;
      }

      .button:active {
        background: #3282d3;
        border: 1px solid #154c8c;
        border-bottom: 1px solid #0e408e;
        -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
        -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
        box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
        text-shadow: 0 -1px 1px #2361a4;
        -webkit-background-clip: padding-box;
      }

      ul#features {
        margin: 40px 0;
        padding: 0 20px;
        float: left;
        width: 600px;
      }

      ul#features li {
        list-style: none;
      }

      ul {
        padding: 0 15px;
      }

      ul li {
        margin: 0 5px;
        padding: 3px 0;
      }

      .action {
        color: #0069d6;
        cursor: pointer;
      }

      .action:hover {
        color: #00438a;
      }

    </style>

JavaScript :

<script>
   $(function () {
     scroller = $('.box-wrap').antiscroll().data('antiscroll');        
  });
</script>

• Body etiketler iasarına eklenmesi gereken bölüm.

Html :

      <div class="box-wrap antiscroll-wrap">
        <div class="box">
          <div class="antiscroll-inner">
            <div class="box-inner">
Bu alana çerçeve içeriğini eklemeniz gerekiyor 

						</div>
          </div>
        </div>
      </div>