창 계산시 시차 배경 위치

Question

간단한 함수로 처음 등장한 것을 누군가 도와 주시겠습니까? 이제는 내 머리카락을 꺼내 ​​주시겠습니까?

저는 윈도우 스크롤 기능에 바인딩되는 매우 간단한 jQuery를 사용하고 있습니다. 나는 내가이 일을하기 위해 필요한 모든 변수들을 가지고 있다고 믿지만, 그렇지 않을 것이다. 내 수학 (들)이 부족한 것 같습니다.

평판이 좋지 않아 이미지를 첨부 할 수 없다는 사과를드립니다. 내가 가지고있는 변수는 브라우저 창 (x), 스크롤 배경 이미지, 배경 이미지 높이 (z) 및 div 맨 위의 스크롤 위치를 가진 div (y)의 높이입니다. 브라우저 창 (o).

div의 백그라운드 위치는 창의 div 위치에 상대적으로 움직여야하므로 브라우저 윈도우의 위에서 아래로 스크롤하는 div에서 전체 이미지를 볼 수 있습니다.

내 계산이있다 : -는 DIV 위치가 -50 모든 방법 (200)에 스크롤로

x+y gives me the whole range of movement the div will require to cover 
from it first being visible to it finally leaving the screen. 

z-y gives me the range of movement the background image will require to 
cover for the whole image to scroll through the div as the div scrolls 
through the browser window. 

(z-y)/(x+y) gives me the number of pixels the background image has to 
move for every 1 pixel the browser window will scroll. 

As an example, 
x = 200 
y = 50 
z = 150 
o starts at -50 and ends at 200 

x+y = 250 (full div movement) 
z-y = 100 (bg image movement) 
(z-y)/(x+y) = 0.4 bg movement per pixel scrolled 

따라서, 상기 BG 이미지는 0 내지 -100으로 스크롤 할 필요가있다.

나는이 마지막 스레드들을 어떻게 묶는 지에 관해서는 손해보고있다. 누구든지이 숫자들을 상관시킬 수 있습니까?

미리 감사드립니다. 바보 같으면 죄송합니다.

마크

여기, 자신의 도움 빈센트 롭 덕분에 내 마지막 코드입니다. 이는 어떤 크기의 영역에 대해 data-type = "background"를 사용해야하는 시차 스크롤과 함께 작동해야합니다. 속도는 브라우저 높이와 배경 이미지 크기에 의해 결정됩니다. 다시 한번 감사드립니다. 이미지가 포함 된 사업부가, 그런 일이 확인을해야 imgWindow와

$(function(){ 
     $(window).bind('scroll', function() { 
      $window = $(window); 
      $('section[data-type="background"]').each(function(){ 
      var $bgobj = $(this); 
      var windowHeight = 0; 
       windowHeight = document.body.clientHeight; 
      var img = new Image; 
       img.src = $(this).css('background-image').replace(/url\(|\)$/ig, ""); 
      var bgImgHeight = parseInt(img.height); 
      var divHeight = parseInt($(this).css('height')); 
      var scrollPos = $(this).position().top - $window.scrollTop(); 
       var bgMovement = bgImgHeight - divHeight; 
       var scrollMovement = windowHeight + divHeight; 
       var intPos = scrollPos + divHeight; 
       var yPos = ((bgMovement)/(scrollMovement)) * intPos; 
       var coords = '50% '+ (-yPos) + 'px'; 
       $bgobj.css({ backgroundPosition: coords }); 
      }); 
     }); 
    }); 

Answer 1

: