我正在为网页开发一种非常简单的视差效果算法。我不想使用插件或大型库来实现这种效果，因为它们太庞大了。我只想要一个简单的函数，该函数可用于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);
});
如您所见，当.parallax对象位于视口上时，视差算法的工作原理如下：生成一个介于0和1之间的数字：
1-（滚动位置+视口高度-物体高度）/（视口高度+物体高度）
然后，此数字用作乘数，用于显示y坐标上从100％到0％的背景图像。
您能帮我改进此算法吗？现在，这些功能可以正常运行，但并不完美，特别是在网页顶部的div上。我想在滚动过程中尽可能多地显示背景图像，最好是显示其所有高度。
谢谢！
好吧..我终于设法写出了令人满意的算法。
我添加了两个乘数，一个乘数用于页面底部的隐藏元素，第二个乘数用于页面顶部已经可见的元素：
if (wH<tY)
var offset = 1-((s+wH-tY)/(tY+tH));
else
var offset = 1-(s/(tY+tH));
在这里，您可以看到它的作用：
http://jsfiddle.net/denoise/o1sbfqxb/
我希望将来有人可以将其用作简单的标准视差功能;）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句