Delay ve BackgroundPosition  uygulamaları kullanılarak yapılmış olan bir tane  çalışma. Animasyonları ve çalışma şekli oldukça dikkat çekici ve güzel tasarlanmış olsa da her yerde ve herkes tarafından kullanılabilir bir örnek olacağını düşünmüyorum. Ekranda dümdüz soldan sağa doğru uzanan bir çizgi ve mouse ile bu bölümün üzerine geldiğiniz anda çizgi aşağı doğru açılıyor ardından da soldan sağa doğru kategoriler yani başlıklar easeOutBack animasyonu ile kayıyorlar. Mouseyi geri çektiğinizde de easeInBack ile sağdan sola doğru kategoriler tekrar kayıp kayboluyorlar. Easing fonksiyonları açılan çizgi içinde kullanılmış. 

Flashy isminden de anlayacağınız  gibi flash menüler gibi görünen bir yapısı var. Tam olarak bu örneğin hangi bölüme (yatay, dikey) ekleneceğine karar veremedim aslında. Başta pek kullanışlı değil diye tanımlaşmış olsamda position:fixed yani sayfada sabit bir şekilde durmasını sağlarsanız sanırım her site için kullanışlı olabilir. Başta aksine fikir belirtmemin sebebi ‘kim kendi sitesinde boydan boya geniş bir alanı linklere ayırır ki ? ‘ idi.  Eğer web sitenizde sabit olarak ayarlarsanız aksine çok az yer kaplar ve oldukça güzel görünümlü bir tasarımınız da olur diye düşünüyorum. O zaman hem yatay hemde dikey olarak kullanılabilir bence.

Kullanım

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

Js ve stil  dosyalarının url adresleri : 

<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>

JavaScript :

<script>
	$(document).ready(function() {	
		$("#menu, #white_line").css("opacity","0");
		$("#menu").stop().animate({
				opacity: 0.9,
				marginLeft: '50px' 
		}, 2400, 'easeInSine');
		$('#white_line').stop().animate(
			{opacity: 0.7},
			{duration:2400,easing: 'easeInSine'
		})

		$('#menu span').mouseenter(function(element) {
			$("#menu ul li").css("opacity","1");
			$('#white_line').stop().animate(
				{top: 40, height:290},
				{duration:500,easing: 'easeOutBack'}
			)
			$("#menu ul li").eachDelay(function(){ 
				$(this).stop().animate({
				opacity: 1,
				marginLeft: '0px',
				backgroundPosition: "150px 0px"
				}, 600, 'easeOutBack');			
			}, 30);			
		});

		$('#menu').mouseleave(function(element) {
			$("#menu ul li").eachDelay(function(index){ 
				$(this).stop().animate({
				opacity: 0,
				marginLeft: '-200px',
				backgroundPosition: "150px 0px"
				}, 600, 'linear');	
				if(index == $("#menu ul li").size() -1){
					$('#white_line').stop().animate(
						{top: 79, height:1},
						{duration:600,easing: 'easeInBack'
					})
				}
			}, 30);

		});

		$('#menu ul li').mouseenter(function(element) {			
			$('#menu ul li').not(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '0.5' 
			}, 500, 'linear');
			$(this).stop().animate({
				backgroundPosition: "300px 0px",
				opacity: '1' 
			}, 600, 'easeOutBounce');	
			$(this).find('a').css("color","#916153");
		});

		$('#menu ul li').mouseleave(function(element) {			
			$(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '1' 
			}, 200, 'linear');	
			$(this).find('a').css("color","#000");
		});

	});	
</script>

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

Html :

		<div id="filter"></div>		
		<div id="white_line"></div>		
		<div id="menu">
			<span></span>
			<ul>
				<li class="item1"><a href="">New Arrivals</a></li>
				<li class="item2"><a href="">Dresses</a></li>
				<li class="item3"><a href="">Polos</a></li>
				<li class="item4"><a href="">Blouses</a></li>
				<li class="item5"><a href="">Sweaters</a></li>
				<li class="item6"><a href="">Pants </a></li>
				<li class="item7"><a href="">Jeans</a></li>
				<li class="item8"><a href="">Jackets</a></li>
				<li class="item9"><a href="">Footwear</a></li>

			</ul>
		</div>