Как мне улучшить это математическое уравнение типа Дж. С. Параллакса?

Question

У меня проблемы с этим уравнением.

По сути, я бы хотел, чтобы div artboard (grid) располагался на краю браузера, когда курсор находится в пределах 200px от края.

Это легко сделать, установив позицию, наблюдая за координатами мыши, однако я бы хотел, чтобы она была плавной.IE Если мышь находится на расстоянии 199px от левого края, тогда lVal должен медленно уменьшаться, пока край объекта артборда не окажется на одной линии с краем хрома.

В данный момент у меня это работает для левого края, но я не могу понять, как это сделать с правым, не вызывая небольшого щелчка.

Пожалуйста, просмотрите мой пример ниже.

http://dev.nimmbl.com/sampler/#

winSize[] = document window size (y,x)

2940 = width of artboard object


    function moveArtboard(e){    

    var t = docbody.offset(), space = 400, lVal, tVal;

    lVal = Math.round((space / 2) + (e.pageX - t.left) * (winSize[1] - (2940 + space)) / winSize[1]);
    tVal = Math.round((space / 2) + (e.pageY - t.top ) * (winSize[0] - (1200 + space)) / winSize[0]);

    if(lVal >= 0){
        artboard.obj.css({
            "left": 0,
            "top": tVal
        });
    } else if(lVal + -winSize[1] <= -2940){
        artboard.obj.css({
            "left": "auto",
            "right": 0,
            "top": tVal
        });
    } else {
        artboard.obj.css({
            "left": lVal,
            "top": tVal
        });
    }

}

Answer 1

Спасибо, чувак!

function moveArtboard(e)
{
var t = docbody.offset(), 
    space = 400, 
    percent = Math.min(1, Math.max(0, e.pageX - (space/2)) / (winSize[1] - space)),
    vPercent = Math.min(1, Math.max(0, e.pageY - (space/2)) / (winSize[0] - space)),
    lVal    = -percent * (2940 - winSize[1]),
    tVal    = -vPercent * (1200 - winSize[0]);

artboard.obj.css({
    left : lVal,
    top  : tVal
});
}

Answer 2

Я всегда нахожу, что с такими уравнениями легче иметь дело, когда вы настраиваете положение мыши в% от того, что вы хотите:

var percent = Math.min(1, Math.max(0, e.pageX - 200) / (winSize[1] - 400));
var lVal    = -percent * (2940 - winSize[1]);
var tVal    = Math.round((space / 2) + (e.pageY - t.top ) * (winSize[0] - (1200 + space)) / winSize[0]);

artboard.obj.css({
    left : lVal,
    top  : tVal
});

Две функции Math должны сохранять значение от 0 до 1, когда оно близко к краю. percent теперь число от 0 до 1, просто умножьте его на столько места, сколько вам нужно.

Я уверен, что это правильно, дайте мне знать, если он не идеален, не проверял.

У меня также есть Math.constrain функция, которую я написал для таких случаев:

Math.constrain = function(num, min, max){
    return num < min ? min : num > max ? max : num;
}

var percent = Math.constrain((e.pageX - 200) / (winSize[1] - 400), 0, 1);