gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 12:40:08 25 4
gpt4 key购买 nike

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

  • 当视口(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();
}

最佳答案

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

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

关于javascript - 视差背景滚动方程 - 示例包括,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24786139/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com