FlashyMenu

11Okunma
1 Yorum

FlashyMenu 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>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-20 tarihinde yayınlandı,Toplam 3396 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(1 Yorum)
Yükleniyor...
muhsin Yorumcu LV.1
2015-07-31 08:05:39 回 Yanıtla

Dostum 1. ‘si Site Tasarımını beğenmedim .. 2.’si Böyle web tasarımıyla ilgili bir site yapacaksan daha iyi tasarımlı olması gerek.. tavsiyemi dikkate al ve tasarımını güncelleştir.. OK