javascript - 视差背景滚动方程 - 示例包括

Question

我创建了这个函数来视差滚动传递的元素的背景图像。

• 当视口(viewport)的高度大于或等于背景图像的高度时，该函数效果很好。
• 然而，当视口(viewport)的高度小于背景图像的高度时，图像滚动速度过快。

在下面的示例中，当视口(viewport)的高度小于 600px(600px 是彩虹图像的高度)时，彩虹背景不会正确地覆盖它后面的灰色元素(它应该始终被完全覆盖) , 但滚动速度太快)

我似乎想不出我在 yB 中需要的额外条款。你能帮我指出一个方程式动态偏移背景的正确方向吗？

jsfiddle 重新创建:http://jsfiddle.net/3htbj/

/**
    Get the height of the passed element's background image.
    @param {element} element - An element.
    @returns {int} The height of the background.
***************************************************************************/
function getBackgroundHeight(element){
    return 600;
}

/**
    Parallax scroll the passed element's background relative to the element.
    @param {element} element - An element.
***************************************************************************/
function parallaxScrollElement(element){
    var hV=window.innerHeight;
    var hE=element.clientHeight;
    var hB=getBackgroundHeight(element);
    var yV=window.pageYOffset; //Relative to document.
    var yE=element.getBoundingClientRect().top; //Relative to view-port.
    var yB=((hB-hE)*yE)/(hE-hV); //Relative to element.
    element.style.backgroundPositionY=yB+"px";
}

/**
    Parallax scroll all elements with CSS class 'parallax'. This function
    should be called onScroll.
***************************************************************************/
function parallaxScroll(){
    var parallaxScrollElements=document.getElementsByClassName("parallax");
    for(var i=0;i<parallaxScrollElements.length;i++)
        parallaxScrollElement(parallaxScrollElements[i]);
};

window.onscroll=function(){
    parallaxScroll();
}

window.onresize=function(){
    parallaxScroll();
}

Answer 1

如果您希望随页面内容一起进行视差滚动，请尝试:

var yB=((yE)/(hV))*(hE-hB);