Jquery視差效應算法

Question

我正在為網頁開發一種非常簡單的視差效果算法。 我不想使用插件或大型庫來實現這種效果，因為它們對我來說太笨重了。 我只想要一個簡單的函數，它可以處理div（或部分​​）上的每個背景圖像，而不會提供額外的html數據，比如'speed'值。

這是整個功能：

$('.parallax').each(function() {
    var thisObj = $(this);
    var tH = $(this).outerHeight();
    var tY = $(this).position().top;
    var wH = $(window).height();

    function bgParallax() {
        var s = $(window).scrollTop();          
        var offset = 1-((s+wH-tY)/(wH+tH)); /* parallax algorithm */

        thisObj.css('background-position','0 '+(offset*100)+'%');
    }

    bgParallax(); /* initial position */    
    $(window).scroll(bgParallax); 
});

結果如下：

http://jsfiddle.net/ZL65K/

正如您所看到的，當.parallax對象位於視口上時，視差算法如下工作，生成介於0和1之間的數字：

1-（滾動位置+視口高度 - 對象高度）/（視口高度+對象高度）

然后，此數字用作乘數，用於在y坐標上顯示100％到0％的背景圖像。

你能幫我改進這個算法嗎？ 現在功能正常，但不完美，特別是在網頁頂部的div上。 我想在滾動期間盡可能多地顯示背景圖像，理想情況是它的所有高度。

謝謝！

Answer 1

好的..我終於設法編寫了一個令人滿意的算法。

我添加了兩個乘法器，一個用於頁面底部的隱藏元素，另一個用於頁面頂部已經顯示的元素：

if (wH<tY) 
    var offset = 1-((s+wH-tY)/(tY+tH));
else
    var offset = 1-(s/(tY+tH));

在這里你可以看到它的實際效果：

http://jsfiddle.net/denoise/o1sbfqxb/

我希望有人可以將它用作未來的簡單標准視差函數;）