title: Custom parallax
body: <p>I'm trying to create my own custom parallax plugin so that I am able to choose the direction the items transition off the screen and I'm just stuck at making sure that no matter how a user scrolls and no matter of the size of the window that the object disappears at the correct point.</p>
  
  <p>Currently I have:</p>
  
  <pre><code>var lastScrollTop = 0;
  var logoStartPos = $('.bg-logo').position().left;
  $(function(){
     $(window).scroll(function(){
  
         var st = $(this).scrollTop();
         if (st &gt; lastScrollTop){
            if($('.bg-logo').is(':in-viewport'))
              $('.bg-logo').css({'left':($('.bg-logo').position().left+10) + "px"});
         } else {
            if($('.bg-logo').is(':in-viewport') &amp;&amp; logoStartPos &lt; $('.bg-logo').position().left)
              $('.bg-logo').css({'left':($('.bg-logo').position().left-10) + "px"});
         }
         lastScrollTop = st;
  
     }); 
  });
  </code></pre>
  
  <p>As you can guess this only moves the item right until it goes off screen. This way has varied results because if I use the scroll wheel it take longer to disappear to if I use the scroll bar. I also have another problem in that if I use a mixture or have a different view port I get an different result all together.</p>
  
  <p>Any tips or pointers to achieve the result I'm after?</p>
  
  <p>An working example of my code is at <a href="http://motoring.egl.me.uk" rel="nofollow">http://motoring.egl.me.uk</a></p>
  
  <p>Thanks Matt</p>