jQuery ile Animasyonlu Sayfa Hazırlama

http://www.erbilen.net/demo/comar/index.html

Köpeğim çomar ve arkadaşları için küçük bir sayfa hazırlamayı planlıyordum.. Ve bu sayfayı hazırlarken de dersini çekmeye karar verdim.. Derste yaptığımız şey, tam sayfa olmak üzere sayfalar arası animasyonlu geçiş.. Yararlı olması dileğiyle..

Sonradan Eklenenler;

Videoda kaldığı yerden devam etmeme hatası vardı.. Bunu aşağıdaki kod ile düzelttim;

/* otomatik olana gitsin */
setTimeout(function(){
	indis = Math.ceil( $('body').scrollTop() / $.height() );
	$('.solMenu ul li').removeClass('aktif').eq( indis ).addClass('aktif');
	$('body').scrollTop( $.height() * indis );
}, 100);

Ve ek olarakta klavye aşağı ve yukarı yön tuşlarını kullanarakta geçiş yaptırdım.. Onlar içinde aşağıdaki kodları kullandım;

/* klavye yön tuşları hareketi */
$.oynat = function(e){
	evt = e || window.event;
	if ( evt.keyCode == 40 || evt.keyCode == 38 ) $('.solMenu ul li').removeClass('aktif');
	/* Aşağı Yön Tuşu */
	if ( evt.keyCode == 40 ){
		if ( indis < $('.blok').length - 1 ) indis++;
		$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
		$('html, body').stop().animate({
			scrollTop: $.height() * indis
		}, {
			duration: 1000
		});
	}
	/* Yukarı Yön Tuşu */
	else if ( evt.keyCode == 38 ){
		if ( indis > 0 ) indis--;
		$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
		$('html, body').stop().animate({
			scrollTop: $.height() * indis
		}, {
			duration: 1000
		});
	}
}

Tabi bu bir fonksiyon.. Body etiketine onkeydown=”$.oynat(event)” şeklinde olayı tanımladım.. Ve birde indis değişkenini genel tanımlayıp tıklamada ve klavye yön tuşlarında otomatik değerini değiştirdim ki nereden kaldıysa oradan devam edebilsin diye.. Kodları incelediğinizde zaten açık ve net görebilirsiniz.

İndir

http://yadi.sk/d/IgV9a6J74-dYm

Demo

http://www.erbilen.net/demo/comar/index.html

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“jQuery ile Animasyonlu Sayfa Hazırlama” üzerine 4 yorum

  1. Gerçekten Çok Başarılı Bir Paylaşım ve Anlatım.

    Tebrik Eder HTML5 Çalışmalarınızın Devamını Bekleriz.

    İyi Çalışmalar

  2. Tebrik ederim demo sayfası hem teknik olarak hem de insani bir ders olarak süper olmuş. Eline sağlık umarım bu demoya bakanlar gerekli duyarlılığı sağlarlar .

  3. Geri bildirim: Anonim

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir