title: Calculate image size and position for Parallax scrolling with jQuery
body: <p>I’m stuck and this is already making me crazy! I need your help for some parallax scrolling calculations.</p>
  
  <p>In <strong><a href="https://jsfiddle.net/ujrwLpwn/" rel="nofollow">the working demo</a></strong> the image inside the container moves slower than it’s container with a speed of -0.5.</p>
  
  <p>Now I need the image to move faster than the container with the value of +0.5. But it’s not working! I’ve tried some many possibilities but I guess I’m not a math pro. — In the middle of the screen all should be centered!</p>
  
  <p>So how do I get the correct position of the image when it moves faster inside the container?</p>
  
  <p>Full code in the <strong><a href="https://jsfiddle.net/ujrwLpwn/" rel="nofollow">DEMO!</a></strong></p>
  
  <p>Extract:</p>
  
  <pre><code>var $cont = $(this),
      contOffsetTop   = $cont.offset().top,
      img             = $cont.find(parallaxBackground),
      speed           = img.attr("data-parallax-speed"),
      contHeight      = $cont.height(),
      imgHeight       = (windowHeight * Math.abs(speed)) + contHeight,
      imgOffset       = imgHeight - contHeight;
  
  var scrollDist      = windowHeight - contOffsetTop - contHeight / 2,
      posY            = scrollDist * -speed - imgOffset;
  
  img.css({
      '-webkit-transform': 'translate3d(-50%, ' + posY + 'px, 0)',
              'transform': 'translate3d(-50%, ' + posY + 'px, 0)',
                    'top': '0'
  });
  </code></pre>
  
  <p>Pleeease – and thanks in advance!</p>