مطور Mtwer

#bird {
			background: transparent url(images/bird-forward-back.png) 0 0 no-repeat;
			position: absolute;
			top: 150px;
			left: 65px;
			width: 180px;
			height: 123px;
			z-index: 2000;
			cursor: pointer;
		}

$('#bird').sprite({fps: 12, no_of_frames: 3});

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();

#hill1 {
			background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x;

#hill2 {
			background: transparent url(images/hill2.png) 0 258px repeat-x;
		}

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

$('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30})

$('#clouds, #hills').spRelSpeed(30);

$('#bird').spState(2); // fly backwards (row 2 of the sprite)
$('#bird').spState(1); // fly forwards (row 1 of the sprite)

<link rel="stylesheet" type="text/css" href="styles/main.css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="scripts/jquery-ui-1.7.2.spritely.custom.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.spritely-0.2.js" type="text/javascript"></script>

<style type="text/css">
		#stage {
			top: 0px;
			left: 0px;
			z-index: 100;
		}
		.stage {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-width: 900px;
			height: 359px;
			overflow: hidden;
		}
		#bg {
			background: #aedfe5 url(images/sky1.png) 0 0 repeat-x;
		}
		#clouds {
			background: transparent url(images/cloud.png) 305px 102px repeat-x;
		}
		#hill2 {
			background: transparent url(images/hill2.png) 0 258px repeat-x;
		}
		#hill1 {
			background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x;
		}
		#bird {
			background: transparent url(images/bird-forward-back.png) 0 0 no-repeat;
			position: absolute;
			top: 150px;
			left: 65px;
			width: 180px;
			height: 123px;
			z-index: 2000;
			cursor: pointer;
		}
	</style>

	<script type="text/javascript">

		(function($) {
			$(document).ready(function() {
				$('#logo').click(function() {
					document.location.href = 'http://www.spritely.net/';
				});
			
				$('#bird')
					.sprite({fps: 9, no_of_frames: 3})
					.spRandom({top: 50, bottom: 200, left: 300, right: 320})
					.isDraggable()
					
					.activeOnClick()
					.active();
				$('#clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 10});
				$('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30});
				$('#hill1').pan({fps: 30, speed: 3, dir: 'left', depth: 70});
				$('#hill1, #hill2, #clouds').spRelSpeed(8);
				
				window.actions = {
					fly_slowly_forwards: function() {
						$('#bird')
							.fps(10)
							.spState(1);
						$('#hill1, #hill2, #clouds')
							.spRelSpeed(10)
							.spChangeDir('left');
					},
					fly_slowly_backwards: function() {
						$('#bird')
							.fps(10)
							.spState(2);
						$('#hill1, #hill2, #clouds')
							.spRelSpeed(10)
							.spChangeDir('right');
					},
					fly_quickly_forwards: function() {
						$('#bird')
							.fps(20)
							.spState(1);
						$('#hill1, #hill2, #clouds')
							.spRelSpeed(30)
							.spChangeDir('left');
					},
					fly_quickly_backwards: function() {
						$('#bird')
							.fps(20)
							.spState(2);
						$('#hill1, #hill2, #clouds')
							.spRelSpeed(30)
							.spChangeDir('right');
					},
					fly_like_lightning_forwards: function() {
						$('#bird')
							.fps(25)
							.spState(1);
						$('#hill1, #hill2, #clouds')
							.spSpeed(40)
							.spChangeDir('left');
					},
					fly_like_lightning_backwards: function() {
						$('#bird')
							.fps(25)
							.spState(2);
						$('#hill1, #hill2, #clouds')
							.spSpeed(40)
							.spChangeDir('right');
					}
				};
				
				window.page = {
					hide_panels: function() {
						$('.panel').hide(300);
					},
					show_panel: function(el_id) {
						this.hide_panels();
						$(el_id).show(300);
					}
				}
				
			});
		})(jQuery);
	
	</script>

<div id="container">
	<div id="stage" class="stage">
		<div id="tap" class="stage"></div>
		<div id="bg" class="stage"></div>
		<div id="clouds" class="stage"></div>
		<div id="hill2" class="stage"></div>
		<div id="hill1" class="stage"></div>
		<div id="logo">Spritely</div>
	</div>
<div id="bird"></div>

</div>