title: move and animate sprite horizontally when scrolling vertically
body: <p>I'm trying to replicate the effect made famous by the "ben the bodyguard" website.</p>
  
  <p>Specifically I'm trying to have a sprite image moving horizontally on the screen when scrolling vertically the page. So it's a 2 step effect:</p>
  
  <ul>
  <li>Scroll horizontally</li>
  <li>Animate the sprite (this is the one they are using <a href="http://benthebodyguard.com/images/thiefsprite.png" rel="nofollow">http://benthebodyguard.com/images/thiefsprite.png</a>)</li>
  </ul>
  
  <p>I managed to replicate the page "as is" locally but whenever I try to customize it I lose some functionality or the animation get super weird.</p>
  
  <p>Searching here in SO I found this <a href="http://jsfiddle.net/pGvgc/2/" rel="nofollow">http://jsfiddle.net/pGvgc/2/</a> </p>
  
  <pre><code>$(document).ready(function(){
  
  var windowWidth = $(window).width();    
  $("#block").css({ "right": windowWidth}); 
  
  $(window).scroll(function(){       
      $("#block").css({ "right":  windowWidth  - $(window).scrollTop()});
  });
  });
  </code></pre>
  
  <p>but I don't understand how to control the start and stop of the scrolling and, even more important, how to animate the sprite dynamically changing the background position.</p>