There is a script effect parallax. For the .left block, the indent on the left side varies from 300px to 0. How to make the indent on the right side also change for the .right block, and the indent from the top for the .top block? Thank you

 $(function() { var $win = $(window), $rev = $('.left'), 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(300, toMiddleMax), margMin = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2)); $(">div", this).css({transform: "translateX("+ 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:400px;} .left, .right, .top { height: 100px; width: 100px; padding: 40px; margin: 10px; } .left {background:red;} .right {background:green;} .top {background:blue;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p></p> <div class="left"></div> <div class="left"></div> <div class="right"></div> <div class="right"></div> <div class="top"></div> <div class="top"></div>

    0