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/

我希望有人可以将它用作未来的简单标准视差函数;）