Эффект перемещающихся прямоугольников

<div id="mb_background" class="mb_background">
	<img class="mb_bgimage" src="/images/default.jpg" alt="Фон"/>
	<div class="mb_overlay"></div>
</div>

<div id="mb_pattern" class="mb_pattern"></div>

		<div class="mb_heading">
			<h1>Отсутствие цвета</h1>
		</div>
		<div id="mb_menu" class="mb_menu">
			<a href="#" data-speed="1000" data-easing="easeOutBack">О нас</a>
			<a href="#" data-speed="1000" data-easing="easeInExpo">Работы</a>
			<a href="#" data-speed="1000" data-easing="easeOutBack">Пресса</a>
			<a href="#" data-speed="1000" data-easing="easeInExpo">Контакт</a>
		</div>

<div id="mb_content_wrapper" class="mb_content_wrapper">
	<span class="mb_close"></span>
	<div class="mb_content">
		<h2>О нас</h2>
		<div class="mb_content_inner">
			<p>Текст...</p>
		</div>
	</div>
	<div class="mb_content">
		...
	</div>
	<div class="mb_content">
		...
	</div>
	<div class="mb_content">
		...
	</div>
</div>

 
<div class="mb_content_inner">
	<p>...</p>
	<ul id="mb_imagelist" class="mb_imagelist">
		<li><img src="/images/small/1.jpg" alt="image1" data-bgimg="images/image1.jpg"/></li>
		<li><img src="/images/small/2.jpg" alt="image2" data-bgimg="images/image2.jpg"/></li>
		<li>...</li>
	</ul>
	<p>...</p>
</div>

@import url('reset.css');

body{
	background:#000;
	color:#fff;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
}
a{
	color:#fff;
	text-decoration:none;
}

img.mb_bgimage{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	opacity:0.8;
	z-index:1;
}
.mb_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat top left;
	z-index:2;
}

.mb_pattern div{
	position:absolute;
	width:50px;
	height:50px;
	background:#000;
	z-index:10;
}

.mb_heading h1{
	position:absolute;
	top:10px;
	left:10px;
	font-size:86px;
	color:#000;
	text-shadow:0px 0px 1px #fff;
	font-family:"Ruslan Display", Arial, sans-serif;
	z-index:4;
}

.mb_menu{
	position:absolute;
	top:154px;
	left:0px;
	z-index:11;
}

.mb_menu a{
	background-color:#000;
	margin-bottom:2px;
	opacity:0.9;
	display:block;
	width:98px;
	height:98px;
	color:#fff;
	line-height:98px;
	text-align:center;
	text-transform:uppercase;
	outline:none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-transition: all 0.2s ease-in;
}
.mb_menu a:hover{
	color:#000;
	background-color:#fff;
}

.mb_menu a{
	background-color:#000;
	margin-bottom:2px;
	opacity:0.9;
	display:block;
	width:98px;
	height:98px;
	color:#fff;
	line-height:98px;
	text-align:center;
	text-transform:uppercase;
	outline:none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-transition: all 0.2s ease-in;
}
.mb_menu a:hover{
	color:#000;
	background-color:#fff;
}

span.mb_close{
	position:absolute;
	top:10px;
	right:10px;
	width:11px;
	height:12px;
	cursor:pointer;
	background:transparent url(../images/close.png) no-repeat top left;
	opacity:0.8;
}
span.mb_close:hover{
	opacity:1.0;
}

.mb_content{
	padding:30px;
	display:none;
}

.mb_content h2{
	font-family:"Ruslan Display";
	text-shadow:0px 0px 1px #fff;
	font-size:42px;
	background:transparent url(../images/line.png) repeat-x bottom left;
	padding:0px 0px 5px 0px;
	margin-bottom:10px;
}

.mb_content_inner{
	line-height:24px;
	height:268px;
	outline: none;
}
.mb_content_inner p{
	padding:5px 0px;
}

ul.mb_imagelist li{
	float:left;
	margin:2px;
	cursor:pointer;
}
ul.mb_imagelist li img{
	display:block;
	opacity:0.3;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-transition: all 0.5s ease-in-out;
}
ul.mb_imagelist li img:hover{
	opacity:1.0;
}

var $menu				= $('#mb_menu'),
	$menuItems			= $menu.children('a'),
	$mbWrapper			= $('#mb_content_wrapper'),
	$mbClose			= $mbWrapper.children('.mb_close'),
	$mbContentItems		= $mbWrapper.children('.mb_content'),
	$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
	$mbPattern			= $('#mb_pattern'),
	$works				= $('#mb_imagelist > li'),
	$mb_bgimage			= $('#mb_background > img'),

Menu		 		= (function(){
  ...
})();

/*
Вызываем инициализацию меню
 */
Menu.init();

var init			= function() {
	preloadImages();
	initPlugins();
	initPattern();
	initEventsHandler();
},

preloadImages		= function() {
	$works.each(function(i) {
		$('<img>').attr('src' , $(this).children('img').data('bgimg'));
	});
},

initPlugins			= function() {
	$mbContentInnerItems.jScrollPane({
		verticalDragMinHeight: 40,
		verticalDragMaxHeight: 40
	});
},

initPattern		= function() {
	for(var i = 0; i < 16 ; ++i) {
		//Случайные вычисления координат
		var o		= 0.1,
		t		= Math.floor(Math.random()*196) + 5, // от 5 до 200
		l		= Math.floor(Math.random()*696) + 5, // от 5 до 700
		a		= Math.floor(Math.random()*101) - 50; // от -50 до 50
				
		$el		= $('<div>').css({
			opacity			: o,
			top				: t + 'px',
			left			: l + 'px'
		});
			
		if (!$.browser.msie)
			$el.transform({'rotate'	: a + 'deg'});
			
		$el.appendTo($mbPattern);
	}
	$mbPattern.children().draggable();
},

disperse 		= function() {
	$mbPattern.children().each(function(i) {
		//Случайные вычисления координат
		var o			= 0.1,
		t			= Math.floor(Math.random()*196) + 5, // от 5 до 200
		l			= Math.floor(Math.random()*696) + 5, // от 5 до 700
		a			= Math.floor(Math.random()*101) - 50; // от -50 до 50
		$el			= $(this),
		param		= {
			width	: '50px',
			height	: '50px',
			opacity	: o,
			top		: t + 'px',
			left	: l + 'px'
		};
				
		if (!$.browser.msie)
			param.rotate	= a + 'deg';
				
		$el.animate(param, 1000, 'easeOutExpo');
	});
},

initEventsHandler	= function() {
	/*
		Нажатие на ссылку в меню
	 */
	$menuItems.bind('click', function(e) {
		var $this	= $(this),
		pos		= $this.index(),
		speed	= $this.data('speed'),
		easing	= $this.data('easing');
		//если пункт еще не выводится на экран
		if(!$menu.data('open')){
			//Если выполняется анимация, то прекращаем действие
			if($menu.data('moving')) return false;
			$menu.data('moving', true);
			$.when(openItem(pos, speed, easing)).done(function(){
				$menu.data({
					open	: true,
					moving	: false
				});
				showContentItem(pos);
				$mbPattern.children().fadeOut(500);
			});
		}
		else
			showContentItem(pos);
		return false;
	});
		
	/*
		Нажатие на кнопку "закрыть" вызывает анимацию перемещения прямоугольников обратно наверх
	 */
	$mbClose.bind('click', function(e) {
		$menu.data('open', false);
		/*
			Если нужно показывать изображение, установленное по умолчанию, при закрытии пункта:
			changeBGImage('images/default.jpg');
		 */
		$mbPattern.children().fadeIn(500, function() {
			$mbContentItems.hide();
			$mbWrapper.hide();
		});
			
		disperse();
		return false;
	});
		
	/*
		Нажатие на изображении из раздела "Работы",
		выводим изображение в фон
	 */
	$works.bind('click', function(e) {
		var source	= $(this).children('img').data('bgimg');
		changeBGImage(source);
		return false;
	});
			
},

changeBGImage		= function(img) {
	//Если изображение текущее, прекращаем работу
	if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
		return false;
				
	var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
	$itemImage.insertBefore($mb_bgimage);
		
	$mb_bgimage.fadeOut(1000, function() {
		$(this).remove();
		$mb_bgimage = $itemImage;
	});
	$itemImage.fadeIn(1000);
},

showContentItem		= function(pos) {
	$mbContentItems.hide();
	$mbWrapper.show();
	$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
},

openItem			= function(pos, speed, easing) {
	return $.Deferred(
	function(dfd) {
		$mbPattern.children().each(function(i) {
			var $el			= $(this),
			param		= {
				width	: '100px',
				height	: '100px',
				top		: 154 + 100 * Math.floor(i/4),
				left	: 200 + 100 * (i%4),
				opacity	: 1
			};
					
			if (!$.browser.msie)
				param.rotate	= '0deg';
					
			$el.animate(param, speed, easing, dfd.resolve);
		});
	}
).promise();
};