LADYX,
атрибут data как источник данных, математику сами и макет лучше целиком
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}
p {height:400px;}
.left,
.right,
.top {
height: 100px;
width: 100px;
padding: 40px;
margin: 10px;
}
.left {background:red;}
.right {background:green;}
.top {background:blue;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $win = $(window),
$rev = $('[data-tr]'),
winH2 = 0,
winSt = 0;
function reveal() {
winSt = $win.scrollTop();
winH2 = $win.height()/2;
$rev.each(function(i, el){
var y = el.getBoundingClientRect().top,
toMiddleMax = Math.max(0, y-winH2),
idealMarg = Math.min(+el.dataset.val, toMiddleMax),
margMin = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2));
$(this).css({transform: el.dataset.tr+"("+ margMin +"px)"});
});
}
$win.on({
"load resize scroll" : reveal
});
});
</script>
</head>
<body>
<p></p>
<div class="left" data-tr="translateX" data-val="300"></div>
<div class="left" data-tr="translateX" data-val="300"></div>
<div class="right" data-tr="translateX" data-val="-300"></div>
<div class="right" data-tr="translateX" data-val="-300"></div>
<div class="top" data-tr="translateY" data-val="300"></div>
<div class="top" data-tr="translateY" data-val="300"></div>
</body>
</html>