jQuery视差效果算法

Question

我正在为网页开发一个非常简单的视差效果算法。我不想使用插件或大型库来实现这种效果，因为它们对于我的目的来说太笨重了。我只想要一个简单的函数，它可以与 div（或部分​​）上的每个背景图像一起使用，而无需提供额外的 html 数据，例如“速度”值。

这是整个函数：

$('.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/

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