scrollit.js ile dikey kayan sayfa yapımı

Son dönemlerde sayfalarda moda haline gelen menüye tıklayınca sayfa değişmek yerine aşağıya doğru kayan sayfaların nasıl yapıldığından bahsetmek istiyorum.

Bunun için kullanacağımız jQuery eklentisinin ismi Scroll It (scrollit.js).

Eklentiyi buradan indirebilirsiniz.

Gelelim sayfamıza nasıl entegre edeceğimize ve kullanımına.

Öncelikle indireceğiniz klasör içerisinde bizim için gerekli olan dosya scrollIt.js veya scrollIt.min.js`dir.

Bu javascript dosyalarından birini sayfamıza entegre edelim. (Bu iki dosyanın farkı scrollIt.min.js nin sıkıştırılmış olmasıdır.)

Önce js doyasımızı sayfalarımızın bulunduğu klasöre kopyalayalım. Ardından /body etiketinden önce aşağıdaki kodları ekleyelim:

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scrollIt.js" type="text/javascript"></script>
<script>
$(function(){
  $.scrollIt();
});
</script>

Daha sonra menümüz için eklememiz gereken kodları ekleyelim. Örnek bir menü oluşturacağım siz kendi menünüze data-scroll-nav="rakam" şeklinde ekleme yapacaksınız.

<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>

Burada önemli olan a etiketi içerisinde data-scroll-nav="rakam" niteliğini kullanmanız. Burada rakam yazdığım yere sırasıyla rakamlar yazarak bir sonrakı adımda hangi bölümü çağırdığımızı söylemiş oluyoruz.

Ardından çağırmak istediğimiz bölümler için ayarlamamızı yapalım:

<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>

Burada da div etiketimiz içerisine data-scroll-index="rakam" yazarak menümüzde hangi rakamı çağırmışsak ona ait bölüme kadar sayfamızın kaymasını sağlamış oluyoruz.

Bir de sayfamızı aşağıya doğru kaydırdıktan sonra yukarı doğru kaydırmak yani geri dönmek istiyorsak şöyle bir ekleme yapabiliriz:

<a data-scroll-goto="0">Back to top</a>

Bu kısımda da a etiketi içerisine data-scroll-goto="0" yazarak 0. elemana kadar yukarı kaydırmasını sağlamış oluyoruz.

DEMO

Kaynak: ScrollIt.Js