Двигаем блоки при вертиальном скроле браузера

by vovkasolovev

HTML

<a href="http://www.artlebedev.ru/everything/moscow/genplan/">Отсюда</a>
<div class="space"></div>
<div id="ss-logo-path">
<div id="el1" style="top: 120px; left: 0px;"></div>
<div id="el2" style="top: 195px; left: 21px;"></div>
<div id="el3" style="top: 161px; left: 155px;"></div>
<div id="el4" style="top: 136px; left: 163px;"></div>
<div id="el5" style="top: 69px; left: 291px;"></div>
<div id="el6" style="top: 209px; left: 312px;"></div>
<div id="el7" style="top: 13px; left: 435px;"></div>
<div id="el8" style="top: 12px; left: 572px;"></div>
<div id="el9" style="top: 342px; left: 4px;"></div>
<div id="el10" style="top: 404px; left: 156px;"></div>
<div id="el11" style="top: 352px; left: 420px;"></div>
</div>
<div class="space"></div>

CSS

.space {height:300px}

#ss-logo-path {
	width: 633px;
	height: 790px;
	position: relative;
}
#ss-logo-path div {
	position: absolute;
	opacity: 1.5;
}
#ss-logo-path #el1 {
	width: 45px;
	height: 38px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-1.png');
	z-index: 2;
}
#ss-logo-path #el2 {
	width: 61px;
	height: 89px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-2.png');
	z-index: 3;
}
#ss-logo-path #el3 {
	width: 55px;
	height: 86px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-3.png');
	z-index: 2;
}
#ss-logo-path #el4 {
	width: 217px;
	height: 216px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-4.png');
	z-index: 1;
}
#ss-logo-path #el5 {
	width: 70px;
	height: 128px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-5.png');
	z-index: 2;
}
#ss-logo-path #el6 {
	width: 244px;
	height: 200px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-6.png');
	z-index: 2;
}
#ss-logo-path #el7 {
	width: 105px;
	height: 48px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-7.png');
	z-index: 2;
}
#ss-logo-path #el8 {
	width: 56px;
	height: 25px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-8.png');
}
#ss-logo-path #el9 {
	width: 223px;
	height: 28px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-9.png');
}
#ss-logo-path #el10 {
	width: 229px;
	height: 28px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-10.png');
}
#ss-logo-path #el11 {
	width: 179px;
	height: 28px;
	background: url('http://img.artlebedev.ru/everything/moscow/genplan/img/el-11.png');
	z-index: 2;
}

JavaScript

var sselements = [
	["el1",120,0,433,264],
	["el2",195,21,473,213],
	["el3",161,155,364,198],
	["el4",136,163,369,157],
	["el5",69,291,529,193],
	["el6",209,312,385,142],
	["el7",13,435,421,321],
	["el8",12,572,451,356],
	["el9",342,4,638,265],
	["el10",404,156,681,265],
	["el11",352,420,723,264]
];

$(function(){

	function moveElementsByK(ko){
		for(k in sselements){
			$('#' + sselements[k][0]).css({
				top: sselements[k][1] + (sselements[k][3] - sselements[k][1]) * ko,
				left: sselements[k][2] + (sselements[k][4] - sselements[k][2]) * ko
			});
		}
	}

	var tempScrollTop, currentScrollTop = 0;

	$(window).scroll(function(){

		currentScrollTop = $(window).scrollTop();

		var cst = currentScrollTop;
		var tst = tempScrollTop;

		if(currentScrollTop > 488){
			cst = 488;
			tst = 488;
		}

		moveElementsByK(cst / 488);

		tempScrollTop = currentScrollTop;
	});

});