alexa  Menu
jquery write less do more

scrollit.js ile dikey kayan sayfa yapımı

  23.09.2014 ,   4 yorum ,   11.666 kez okundu.

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

4 yorum yapılmış

    Səhifəni üfüqi hərəkət etdirmək - Scroll Page Horizontally

    […] bilirik. Səhifəmizdəki məlumatlar nə qədər çox olarsa səhifəmiz sağ tərəfdəki scroll çubuğu ilə aşağı-yuxarı doğru hərəkət […]

    28.06.2015, 2:11:16

    gürcan

    bütüm çalışmalarıma rağmen site temasına monte etmeyi başaramadım kod bilgisi olan yardımcı olacak birini arıyorum

    29.09.2016, 11:18:49

    Erdal

    MaşaAllah detaylı ve açıklayıcı bilgi. Teşekkürler kardeşim.

    30.01.2019, 23:34:34

    Dursun Karalı

    İşte bu üstad teşekkürler. Aradım sonunda çözümü burada buldum ilmine ve sana saygılarımı sunuyorum. Tebrikler. Site kaliteli, içerik kaliteli, uslup kaliteli. Siteyi kaybetmemek adına takibe aldım ve sık kullanılanlara ekleyiverdim. iyi çalışmalar.

    24.09.2020, 1:47:11

Yorum yapın..

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


The reCAPTCHA verification period has expired. Please reload the page.