1
전달 된 요소의 배경 이미지를 시차로 스크롤하도록이 함수를 만들었습니다.시차 배경 스크롤 수식 - 예제 포함
- 보기 포트의 높이가 배경 이미지의 높이보다 크거나 같으면이 기능이 훌륭하게 작동합니다.
- 그러나보기 포트의 높이가 배경 이미지의 높이보다 작 으면 이미지가 너무 빠르게 스크롤됩니다.
아래 예제에서보기 포트가 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();
}