jquery - Mousemove parallax effect moves position of div -

i'm trying create slight parallax effect (i'm not sure if constitutes parallax it's similar idea). there 4 layers move around @ different rate when mouse moves.

i have found great example offers similar want:

http://jsfiddle.net/x7uwg/2/

it achieves shifting background position on #landing-content div when mouse moves.

$(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');   });   }); 

however, cannot work out way work not on background-position shift, on div position shift. e.g position:relative; , top:x div moves around little.

my reasoning div contains css animation elements needs div content inside it, not background image.

any solutions using code above?

how using jquery.offset() instead? might want adjust math/values, think should set in right direction.

$(document).ready(function () {     $('#layer-one').mousemove(function (e) {         parallax(e, this, 1);         parallax(e, document.getelementbyid('layer-two'), 2);         parallax(e, document.getelementbyid('layer-three'), 3);     }); });  function parallax(e, target, layer) {     var layer_coeff = 10 / layer;     var x = ($(window).width() - target.offsetwidth) / 2 - (e.pagex - ($(window).width() / 2)) / layer_coeff;     var y = ($(window).height() - target.offsetheight) / 2 - (e.pagey - ($(window).height() / 2)) / layer_coeff;     $(target).offset({ top: y ,left : x }); }; 

jsfiddle: http://jsfiddle.net/x7uwg/854/