스크롤 할 때 경로를 따라 배경 이미지 위치를 이동하십시오.

Question

이것이 완벽하게 배치되지 않은 경우이 게시물이 제 첫 번째 게시물입니다.

http://artofflightmovie.com/

배경 이미지, 즉 공동의 경로를 따라 이동 :

는 기본적으로 나는 훌륭하게 레드 불 아트 비행의 영화 웹 사이트에 사용 된 것과 동일한 또는 유사한 효과를 달성하기 위해 노력하고 사용자가 페이지를 아래로 스크롤 할 때의 좌표입니다. 나는 현재 배경 애니메이션에 대한 내용 애니메이션에 대해 걱정할 필요가 없다.

나는, 기본을 나 애니메이션에에서 배경을 움직일 수 있어요하지만 stauck 난 B에서 C로 이동하고자 할 때 등 등 D c를, 무엇을해야하는지에

내가 시도입니다 공개적인 사용할 수를 사용 : 이것은 사용자가 스크롤이하지만 난 그 다음 애니메이션을 설정 얼마나 확실하지 않다 날 때 배경 위치 변경을 설정할 수 있습니다

$('.bg').scroll(function(){ 
    var x = $(this).scrollTop(); 
    $(this).css('background-position','0% '+parseInt(-x/10)+'px'); 
}); 

. 나의 초기 생각은 else를 사용하는 것이지만 이것은 성공적이지 못했다.

artofflightmovie.com 예제는 백그라운드 위치 px 측정 값 배열을 설정 한 다음 타임 라인과 같이 읽습니다.

그러나 CSS가 내 jQuery에 대한 지식은 내가 갖고있는 문제를 극복 할 수있는 수준이 아니라는 점에서 좋습니다.

나는 Art Of Flight 페이지의 소스를 가져 와서 단순한 버전을 만들려고했으나 다시 쓸모가 없었습니다.

도움이된다면,

Answer 1

인풋 주셔서 감사합니다. 경로를 렌더링하는 캔버스 요소를 사용하여 jQuery를이 함께 스크롤을 제어 http://joelb.me/scrollpath/

큰 jQuery 플러그인 :

는 사실 내가 여기에 후였다 물건의 종류를 발견했다. 이벤트/기능은 모든 방법으로 트리거 될 수 있습니다.