jQuery ile İçerikler Arası Geçiş Efekti

Gün geçtikçe kullanıcıları rahat ettirmek amaçına siteler daha kullanılabilir hale getiriliyor. Bu örneklerden biri de Google ‘ın sosyal platformu olan Google+ ‘da gönderilen gönderiler arası tuşlar ile kayarak geçiştir. Fareyi kenara bırakıp klavye üzerinden yayın akışını gezmemizi sağlıyor. İşte bu yazıda sizlere klavye ile sitenizde bulunan içerikler arasında kayarak geçişi nasıl yapacağınızı anlatacağım.

Algoritması

Tuş kontrollü içerikler arası kayarak geçiş fonksiyonunu bir blogu temel alarak anlatacağım. Blogumuzun anasayfasında yazılarımızın bulunduğu her elementin kendine has birer id özniteliği bulunsa da hepsinin ortak bir class ‘ı olmalıdır. Hepsinin ortak bir class ‘ı bulunması yazıları seçmemizi oldukça kolaylaştıracaktır. Yazılarımızın bulunduğu iskeleti hazırladıysak işin bu kısmı tamamdır.

Şimdi ise jQuery kısmına gelelim. Bu kısımda ilk olarak kullanacağımız tuşları belirliyoruz. jQuery ile hangi tuşa basıldığını bilmek için önce kullanacağımız tuşların anahtar kodunu bilmemiz gerek. Tuş kodlarını Cambia Research ‘ın Javascript Char Codes (Key Codes) adlı sayfasında bulabilirsiniz. Ben de Google+ ‘ın tercih ettiği “j” ve “k” tuşlarını seçtim. Bir sonraki içeriğe kaymak için kullanacağımız “j” tuşunun kodu 74 ve bir önceki içeriğe kaymak için kullanacağımız “k” tuşunun kodu ise “75″.

Mantıksal denetmelere ve kod algoritmasına gelelim. İlk önce bir form elemanı aktifken yani sayfa üzerinde herhangi bir yazı yazıyorken “j” ve “k” harflerini kullanabileceğimiz ihtimaline karşın böyle bir durumda fonksiyonumuzu pasifleştireceğiz. Bunun için sayfa üzerinde genel bir değişken tanımlıyoruz. Bu değişkenimizin adı “inputAktif” olsun ve varsayılan değeri 0 olsun. inputAktif değişkeni 1 olduğunda fonksiyonumuz çalışmayacak ve yazı yazarken sayfamız aşağı yukarı kaymayacak. Sayfa üzerinde yazı yazarken fonksiyonumuzu pasif ettiğimize göre şimdi sıra fonksiyonumuzun asıl işlevine geldi. Fonksiyonumuzun işlevi gayet basit. Sayfada ilk tuşa bastığımızda sayfanın kayacağı yer ilk yazı olacağı için “index” adındaki değişkenimizi -1 olarak tanımlıyoruz. Çünkü index sıralaması 0 ‘dan başlar ve biz “j” tuşuna her basışımızda index değişkenimiz +1 olacağı için ilk değerini -1 yaptık. index değişkenindeki değere göre $(‘.elementClass:eq(‘ + index + ‘)’) şeklinde yazımızın bulunduğu elementi seçeceğiz. Elementimizi seçtikten sonra .offset().top ile yazımızın bulunduğu sayfaya göre dikey olarak kaç px aşağıda olduğunu bulacağız. Ardından efekt fonksiyonu olan .animate() ‘in scrollTop özelliği ile sayfamızı aşağı/yukarı kaydıracağız.

Unutmadan bir kaç küçük işlev daha eklemeliyiz. Bunlar:

1. Sayfada “j” ile aşağı inmeden “k” ile bir önceki yazıya çıkmaya çalıştığımızda index değişkenimiz her seferinde 1 değer azalacaktır. Ne kadar “k” ile azaltırsak “j” ‘e o kadar bastıktan sonra anca ilk yazıya ulaşabiliriz. O yüzden sayfada en ilk yazıdayken veya hiç “j” tuşuna basdıysak index değişkenimizin 1 değer azalmasını mantıksal denetlemeler ile engelleyeceğiz.
2. Aynı şekilde sayfadaki son yazıya geldikten sonra başka yazı olmadığı için “j” tuşuna bastığımızda index değişkenimizin artmasını engelleyeceğiz.
3. Scrollumuzu aşağı ve yukarı şekilde hareket ettireceğimiz için iki sefer .animate() fonksiyonunu kullanıp scrollTop özelliği ile sayfamızı aşağı, yukarı oynatma kodlarını yazmamız gerecek. Bunun için bu işlevi bir fonksiyona alırsak bizim için düzenlemesi ve kullanması daha yararlı olacaktır.

Algoritmamızı Koda Dökelim

Algoritma da bittiğine göre işin kodlanış kısmına rahatlıkla geçebiliriz.

function arrowkeys(){ //
	var class = 'post'; // elementlerimizin class 'ını belirliyoruz.
	var index = -1;
	var maxIndex = jQuery('.' + class + ':last').index() - 1; // son yazının index 'i.
	var firstRun = 0; // ilk kez çalışıp çalışmadığını kontrol etmemize yarayacak olan değişken
	var inputAktif = 0; // herhangi bir form elemanı aktif iken 1 değilken 0 olan değişken

	function asagiYukari(ay){ // asagiYukari('aşağı'), asagiYukari('yukarı') şeklinde scroll kayması için oluşturulan değişken
		if(inputAktif == 0){ // formlara yazı girilirken fonksiyonun çalışmaması için.
			if(firstRun == 0){ // ilk kez çalışıyor.
				if(index !== -1 && ay == "yukarı"){ // ilk yazıdaysa değilsek ve yukarı çıkmak istiyorsak index -1 olacak.
					index--;
				}
			}else{ // daha önce çalıştırılmış.
				if(index !== 0 && ay == "yukarı"){ // ilk yazıda değilsek ve yukarı çıkmak istiyorsak index -1 olacak
					index--;
				}
			}
			if(index !== maxIndex && ay == "aşağı"){ // son yazıda değilsek ve aşağı inmek istiyorsak index +1 olacak.
				index++;
			}
			var px = jQuery('.' + class + ':eq('+index+')').offset().top;
			jQuery('html, body').stop().animate({
				scrollTop: px
			}, 250);
			firstRun++; // fonk. çağrıldığında değişkeni +1 yaptık ki ilk kez çalışıp çalışmadığını kontrol edebilelim.
		}
	}

	$(':input').focusin(function(){
		inputAktif = 1; // herhangi bir form elemanında yazı yazıyorken fonk. çalışmaması için
	});

	$(':input').focusout(function(){
		inputAktif = 0; // herhangi bir form elemanından dışarı çıkınca fonk. çalışmaya devamı için
	});

	jQuery(document).keyup(function(e) { // sayfada bir tuşa basıldığında devreye girecek olan fonk.
		if(e.keyCode == 74) { // 74 kodlu tuş yani j tuşu ise
			asagiYukari('aşağı'); // sayfa aşağı kaysın
		}else if(e.keyCode == 75){ // 75 kodlu tuş yani k tuşu ise
			asagiYukari('yukarı'); // sayfa yukarı kaysın
		}
	});
}

$(document).ready(function() {
	arrowkeys(); // fonksiyonumuzu çalıştırdık.
});