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/

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