mintik

Çok uzun zamandan beri var olan ve bazı linklerini kaybettiğimden dolayı taslak olarak kaydetmiş olduğum yazıyı bu gün sizlerle tekrar paylaşmak istedim. Bir sprite animasyon uygulaması bunca zaman boyunca durmadan hizmet verebiliyorsa eğer gerçekten çok faydalıdır demek oluyor. Bu yüzden paylaşmamak olmaz dedim.

Belki daha önceden rastlamışsınızdır bir yerlerde, web sayfasının üst kısmında bir o yana bir bu yana uçuan 2 tane karga animasyonu.  Bir zamanlar bu tarz çalışmalar oldukça popülerdi ancak bu günlerde pek rastladığım söylenemez. Yine de değişik hareketli animasyon severlerin işine yarayacağına inanıyorum. Ayrıca bir diğer özelliği de kargalar uçarken arkaplandaki manzara resimleri de 3 boyutlu olarak hareket ediyor. İstediğiniz kadar katman ekleyerek parallax görütü elde edebilirsiniz.

Spritely.js Kullanımı:

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

Js dosya adresleri:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.spritely-0.1.js"></script>

Bu iki dosya uzantısını head etiketleri arasına ekledikten sonra sıra geliyor katmanlara ve bu katmanlara vereceğiniz hıza. Mutlaka arabada yolculuk yapmışsınızdır. Uzaklarda görünen dağlar kıpırdamıyor gibi görünürken yakındakiler de hızlıca hareket edermiş gibi görünür. Nesneler ne kadara uzak olursa hareketleri de o kadar yavaş olur. Biz de buna göre her katmana Javascript ile ayrı ayrı hız vereceğiz.

Parametreler:

• Fps: Sprite tekniğinde kareler arası geçiş hızı.
• Speed: Katmanların kayma hızı.
• Dir: Katmanların sağa yada sola kaymasını belirlediğiniz bölüm. Örnek: dir: ‘left’ veya dir: ‘right’ şeklinde ayarlayabilirsiniz.

Bulutlar:

Rengi beyaz olduğundan dolayı görünmesi için arka plan rengini kırmızı yaptım. Resme tıkladığınızda tam boyu açıldığında yine bembeyaz bir çerçeve göreceksiniz. Çerçevenin içine sağ tıklayıp resmi farklı kaydet diye kaydedin bilgisayarınıza.

En uzakta olan nesne olduğundan dolayı buna ekleyeceğimiz sürat çok az olmalıdır.

$('#bulutlar').pan({fps: 30, speed: 0.3, dir: 'left'});

 Dağlar:

Hazırlayacağınız sprite çalışmasında dağların şekline göre hız vermeniz en doğrusudur. Bizdeki örnek biraz çizgi filmleri andırdığından dolayı nesneler biraz hızlı hareket ediyorlar. Daha gerçekçi çalışmalar için olması gereken hızları bilmeli yada denemelisiniz ta ki en iyi sonucu elde edene dek.

$('#daglar').pan({fps: 30, speed: 1, dir: 'left'});

 Ağaçlı ve yel değirmenli resim.

Bu da dağların önünde durduğundan dolayı sürati biraz daha hızlı olmalıdır.

$('#agaclar').pan({fps: 30, speed: 1.5, dir: 'left'});

 Kuşlar:

Kuşların hareketlerini ve gezebilecekleri alanların sınırını belirlediğinizde bu alan içinde hareket edip dururlar. İsterseniz sabit bir noktada bile tutabilirsiniz.

$('#kus').sprite({
    fps: 9,
    no_of_frames: 3,
    play_frames: 0
})
    .spRandom({
    top: 120,
    left: stage_left + 500,
    right: 500,
    bottom: 100,
    speed: 500,
    pause: 1000
});

Bu kodların toplanmış hali aşağıdaki JavaScript kodu gibidir. Toplamda 4 tane katman bulunuyor ama bu katmanları istediğiniz kadar çoğaltabilmeniz mümkün. Bende buna göre bir örnek hazırlamaya çalışıyorum ancak resimlerin kesimi baya zaman aldığından dolayı öncelikle resmi konunun açıklamasını yapmak istedim.

<script type="text/javascript">
	(function ($) {
	    $(document).ready(function () {

	        $('#bulutlar').pan({
	            fps: 30,
	            speed: 0.3,
	            dir: 'left'
	        });
	        $('#daglar').pan({
	            fps: 30,
	            speed: 0.3,
	            dir: 'left'
	        });
	        $('#agaclar').pan({
	            fps: 30,
	            speed: 0.5,
	            dir: 'left'
	        });

	        var stage_left = (($('body').width() - 866) / 2);
	        var stage_top = 30;


	        $('#kus').sprite({
	            fps: 9,
	            no_of_frames: 3,
	            play_frames: 0
	        })
	            .spRandom({
	            top: 120,
	            left: stage_left + 500,
	            right: 500,
	            bottom: 100,
	            speed: 500,
	            pause: 1000

	        });
	    });
	})(jQuery);
</script>

Css :

body {
    margin:0 auto;
    background-color:yellow;
}
#bulutlar {
    position:absolute;
    width:100%;
    height: 800px;
    background: transparent url(bulutlar.png) 0 0px repeat-x;
}
#daglar {
    background: transparent url(daglar.png) 0 0 repeat-x;
    position:absolute;
    width: 100%;
    height:300px;
    margin-top:200px;
}
#agaclar {
    position: absolute;
    width: 100%;
    height: 500px;
    margin-top:-100px;
    background: transparent url(agaclar.png) 0 130px repeat-x;
}
#kus {
    position: absolute;
    top: 70px;
    left: 155px;
    width: 140px;
    height: 96px;
    z-index: 1800;
    cursor: pointer;
    background: transparent url(kuslar.png) 0 0 no-repeat;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="bulutlar"></div>
<div id="daglar"></div>
<div id="agaclar"></div>
<div id="binalar"></div>
<div id="kus"></div>

Spritely.js uygulamasının kullanımı için anlatacaklarımızı bu kadar. Ben de kendimce binalar, deniz, bulutlar, bir karga ve bir tane de jet ski kullanarak bir örnek hazırladım. Son olarak bir tane de gemi ekledim. Gemi deniz katmanlarının ortasına eklenmiş. Demir atmış şekilde yapacaktım ama sonradan vazgeçtim ve kargaların tersi yönünde biraz daha yavaş hareket ediyor. Deniz konusunda hala iyi olmuş diyemem. Biraz dalgalı yapmış olsaydım sanırım daha iyi olacaktı. Neyse hazırlamış olduğum demoya kırmızı butondan bakabilirsiniz.