jQuery 및 window.pageYOffset을 사용하여 기본 시차 효과 만들기

Question

스크롤 할 때 슬라이더 이미지가 느린 속도로 페이지 아래로 스크롤되는 효과를 만들려고합니다. 이것은 시차와 비슷합니다. 좋은 데모는이 사이트입니다. http://escapeflight.com/

페이지를 아래로 스크롤하면 내가 말하는 효과를 알 수 있습니다.

내 응용 프로그램은 비슷하지만 고정되어 있지 않은 헤더가 있습니다. 아래 코드 :

header = $('header').height(); 

function setTopSlider(){ 
    offset = window.pageYOffset; 

    //if we have scrolled down past the height of the header, we want to begin the 'parallax' effect 
    if(iScroll > header){ 
     $('.slides').css('top',(offset/3)) 
    }else{ 
     $('.slides').css('top',0); 
    }; 
}; 

$(window).scroll(function() { 
    setTopSlider(); 
}); 

이 작동하지만 당신은 헤더의 높이를지나 스크롤 할 때, .slides의 CSS 값이 계산 된 값 아래로 이동합니다. 이 계산에 대한 도움이 필요합니다. offset/3 슬라이더 상단에 도달하면 점프가 없습니다. 페이지의 나머지 부분과 다른 속도로 스크롤하기 시작합니다.

다시 말해서 슬라이더가 필요합니다. 더 느린 속도로 스크롤 한 다음 페이지의 나머지 부분을 스크롤하므로 위의 기술을 사용하여 현재 'pageYOffset'에 의해 계산 된 '상단'위치를 설정하여 '위조'합니다. 어떤 아이디어?

Answer 1

이것은 마크 업 설정 방법에 따라 다릅니다. 당신이 보여준 사이트에서 그들은 절대 위치 div를 가지고 있으며 그들은 최고의 가치를 조정했습니다. 나는 당신이 비슷한 html/css 구조를 가지고 있다고 가정하고있다. 그렇다면 시도하십시오 :

$('.slides').css('top' , ((offset - header)/3)); 

"/ 3"을 조정하여 속도를 조정하십시오.