Эффект сглаживания движения, следующий за позицией мыши

Question

Я хочу создать очень простой эффект, перемещающий фоновое изображение при перемещении мыши. Для этого Im записи положения мыши и используя его, чтобы изменить свойство CSS:

$('#landing-content').mousemove(function(e){ 
    var amountMovedX = (e.pageX * -1/6); 
    var amountMovedY = (e.pageY * -1/6); 
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px'); 
}); 

http://jsfiddle.net/X7UwG/580/

Я хочу, чтобы сделать фон движения менее агрессивны, на первый я, хотя хорошо, позволяет просто увеличить коэффициент делителя в уравнении для того, чтобы сделать более крупные позиции мыши нижней:

http://jsfiddle.net/X7UwG/581/

Основная проблема с этим подходом является то, что фон действительно движется медленнее, но и очень неряшливый (медленно двигайте мышь). Поскольку мы теперь делим на 100 вместо 6, то не десятичная часть результата изменяется после нескольких пикселей движения (открывайте консоль и видите результат). Поскольку фоновое положение принимает не десятичные значения как правильные, движение не является текучим.

Я предполагаю, что у меня есть два способа решения этого вопроса, сглаживание переходов между движениями или другое уравнение, которое преобразует положение мыши в другое положение, но я не могу понять, как это исправить.

Вторая часть проблемы заключается в том, чтобы предотвратить фоновое движение превзойдет размер фона:

Answer 1

бы что-то вроде этой работы для вас?

я просто уменьшил делитель наполовину и увеличил размер фонового изображения для учета движения и прикладной margin:0 на теле, чтобы скрыть пробелы, который присутствовал в скрипке

http://jsfiddle.net/X7UwG/582/

$('#landing-content').mousemove(function(e){ 
    var amountMovedX = (e.pageX * -1/50); 
    var amountMovedY = (e.pageY * -1/50); 
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px'); 
    console.log(amountMovedX); 
}); 



body { 
    margin:0px; 
} 
#landing-content { 
    overflow: hidden; 
    background-image: url(http://i.imgur.com/F2FPRMd.jpg); 
    width: 100%; 
    background-size: 115%; 
    background-repeat: no-repeat; 
    max-height: 500px; 
    border-bottom: solid; 
    border-bottom-color: #628027; 
    border-bottom-width: 5px; 
    padding:0px; 
}