[LADYX]

Мне нужно сделать вот что: блоки .left при прокрутке меняют отступ от 300 до 0, т.е. двигаются от центра влево. А блоки .right должны менять отступ от -300 до 0, двигаясь от центра вправо, что мне и не получается сделать. Прошу у вас помощи.

$(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
});

});

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

p {height:250px;}

.left,
.right,
.top {
  height: 100px;
  width: 100px;
  padding: 40px;
  margin: 10px;
}
.left {background:red;float:left;}
.right {background:green;float:right;}
.top {background:blue;}

<p></p>
<div class="left" data-tr="translateX" data-val="300"></div>
<p></p>
<div class="left" data-tr="translateX" data-val="300"></div>
<p></p>
<div class="right" data-tr="translateX" data-val="-300"></div>
<p></p>
<div class="right" data-tr="translateX" data-val="-300"></div>
<p></p>
<div class="top" data-tr="translateY" data-val="300"></div>
<p></p>
<div class="top" data-tr="translateY" data-val="300"></div>
<p></p>