title: Mousemove parallax effect moves position of div
body: <p>I'm trying to create a slight parallax effect (I'm not sure if it really constitutes parallax but it's a similar idea). Where there are four layers which all move around at a slightly different rate when the mouse moves.</p>
  <p>I have found a great example that offers something similar to what I want:</p>
  <h2><a href="http://jsfiddle.net/X7UwG/2/" rel="noreferrer">http://jsfiddle.net/X7UwG/2/</a></h2>
  <p>It achieves this by shifting the background position on the <code>#landing-content</code> div when the mouse moves.</p>
  <pre><code>$(document).ready(function(){
    $('#landing-content').mousemove(function(e){
      var x = -(e.pageX + this.offsetLeft) / 20;
      var y = -(e.pageY + this.offsetTop) / 20;
      $(this).css('background-position', x + 'px ' + y + 'px');
    });  
  });
  </code></pre>
  <p>However, I cannot work out a way to get this to work not on a <code>background-position</code> shift, but on a <code>div</code> position shift. E.g <code>position:relative;</code> and <code>top:x</code> so that the div itself moves around a little.</p>
  <p>My reasoning is that the div contains CSS animation elements so it needs to be a div with content inside it, not a background image.</p>
  <p><strong>Any solutions for this using the code above?</strong></p>